/* =========================================================
   LOGOS Hero v30 — Fixed Editorial
   - constellation on the left
   - editorial intelligence narrative on the right
   - no top hero header and no central divider
   - long-form core story, compact module story + KPI system
   ========================================================= */

body.logos-landing-page--hybrid {
  --logos-story-accent: #00b97d;
  --logos-story-ink: #063a2d;
  --logos-story-muted: #5f7d75;
  --logos-story-line: rgba(0, 145, 102, .12);
  --logos-editorial-gap: clamp(1.35rem, 2.5vw, 3.5rem);
  overflow-x: hidden;
}

body.logos-landing-page--hybrid .logos-v21-scanner,
body.logos-landing-page--hybrid .logos-v21-orbit--arc,
body.logos-landing-page--hybrid .logos-background__orbit {
  display: none !important;
}

body.logos-landing-page--hybrid .logos-editorial-shell {
  width: min(100%, 1900px) !important;
  min-height: 100svh;
  height: 100svh !important;
  margin-inline: auto;
  padding:
    clamp(.55rem, 1.1vh, .95rem)
    clamp(.85rem, 1.9vw, 2.4rem)
    clamp(.55rem, 1.1vh, .95rem) !important;
}

body.logos-landing-page--hybrid .logos-editorial-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(34rem, .85fr);
  grid-template-areas: "visual content";
  align-items: stretch;
  gap: var(--logos-editorial-gap);
  width: 100%;
  height: 100%;
  min-height: 0;
  direction: ltr;
}

body.logos-landing-page--hybrid .logos-editorial-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  contain: layout style;
}

body.logos-landing-page--hybrid .logos-editorial-content {
  grid-area: content;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding:
    clamp(.55rem, 1.7vh, 1.35rem)
    clamp(.2rem, .65vw, .75rem)
    clamp(.35rem, 1vh, .8rem);
  direction: rtl;
  text-align: right;
}

/* The central divider from v28 is intentionally removed. */
body.logos-landing-page--hybrid .logos-editorial-content::before {
  display: none !important;
  content: none !important;
}

/* =========================================================
   Constellation
   ========================================================= */
body.logos-landing-page--hybrid .logos-hybrid-scene {
  position: relative;
  z-index: 2;
  width: min(60vw, 1120px, calc((100svh - 2rem) * 1.62)) !important;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 1600 / 820;
  margin: auto !important;
  align-self: center;
  justify-self: center;
  overflow: visible;
  transform: translate3d(0, -.45rem, 0) !important;
  transform-origin: 50% 50%;
  filter: none !important;
  contain: layout style;
}

body.logos-landing-page--hybrid .logos-hybrid-svg {
  width: 100%;
  height: 100%;
}

body.logos-landing-page--hybrid .logos-hybrid-node__tooltip {
  display: none !important;
}

body.logos-landing-page--hybrid .logos-hybrid-node.is-story-active {
  outline: 0 !important;
  box-shadow: none !important;
}

body.logos-landing-page--hybrid [data-visual-module] {
  transition: filter 260ms ease, opacity 260ms ease;
}

body.logos-landing-page--hybrid [data-visual-module].is-story-active {
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--story-accent) 40%, transparent))
    brightness(1.055);
}

/* =========================================================
   Story panel
   ========================================================= */
body.logos-landing-page--hybrid .logos-story-panel {
  --story-accent: var(--logos-story-accent);
  position: relative !important;
  z-index: 5;
  inset: auto !important;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: 48rem;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: hidden !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  direction: rtl;
  text-align: right;
  contain: layout style;
}

body.logos-landing-page--hybrid .logos-story-panel__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .7;
}

body.logos-landing-page--hybrid .logos-story-panel__ambient span {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--story-accent) 13%, transparent);
  border-radius: 50%;
}

body.logos-landing-page--hybrid .logos-story-panel__ambient span:nth-child(1) {
  width: 13rem;
  height: 13rem;
  top: -8rem;
  left: -6rem;
}

body.logos-landing-page--hybrid .logos-story-panel__ambient span:nth-child(2) {
  width: 5rem;
  height: 5rem;
  top: 19%;
  right: 3%;
  border-style: dashed;
}

body.logos-landing-page--hybrid .logos-story-panel__ambient span:nth-child(3) {
  width: 19rem;
  height: 19rem;
  right: -15rem;
  bottom: -7rem;
}

body.logos-landing-page--hybrid .logos-story-panel__contents {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding:
    clamp(1rem, 2.2vh, 1.8rem)
    clamp(.25rem, .65vw, .7rem)
    clamp(1.15rem, 2.6vh, 2rem)
    clamp(.7rem, 1vw, 1.15rem);
}

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

body.logos-landing-page--hybrid .logos-story-panel__content {
  position: relative;
  min-height: 0;
  opacity: 0;
  transform: translate3d(0, 1rem, 0) scale(.992);
  filter: blur(9px);
  clip-path: inset(0 0 6% 0 round 1.4rem);
  transition:
    opacity 290ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    filter 340ms ease,
    clip-path 420ms cubic-bezier(.22, 1, .36, 1);
}

body.logos-landing-page--hybrid .logos-story-panel__content.is-present {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  clip-path: inset(0 0 0 0 round 0);
}

body.logos-landing-page--hybrid .logos-story-panel__content.is-leaving {
  opacity: 0;
  transform: translate3d(0, -.8rem, 0) scale(.992);
  filter: blur(10px);
  clip-path: inset(5% 0 0 0 round 1.3rem);
}

body.logos-landing-page--hybrid .logos-story-panel__content[hidden] {
  display: none !important;
}

body.logos-landing-page--hybrid .logos-story-panel::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  right: -28%;
  width: 24%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-12deg);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--story-accent) 8%, #fff),
    transparent
  );
}

body.logos-landing-page--hybrid .logos-story-panel.is-switching::after {
  animation: logosStorySweep 620ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes logosStorySweep {
  0% { right: -28%; opacity: 0; }
  22% { opacity: .8; }
  100% { right: 112%; opacity: 0; }
}

body.logos-landing-page--hybrid [data-story-line] {
  opacity: 0;
  transform: translate3d(0, .65rem, 0);
  transition:
    opacity 360ms ease,
    transform 500ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--story-order, 0) * 42ms + 60ms);
}

body.logos-landing-page--hybrid .logos-story-panel__content.is-present [data-story-line] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* =========================================================
   Typography
   ========================================================= */
body.logos-landing-page--hybrid .logos-story-panel__meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .72rem;
  color: var(--story-accent);
}

body.logos-landing-page--hybrid .logos-story-panel__meta span {
  display: inline-grid;
  place-items: center;
  min-width: 2.15rem;
  height: 2.15rem;
  border: 1px solid color-mix(in srgb, var(--story-accent) 20%, transparent);
  border-radius: .76rem;
  background: color-mix(in srgb, var(--story-accent) 8%, #fff);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--story-accent) 8%, transparent);
  font-family: var(--logos-font-en, "Ray", sans-serif);
  font-size: .7rem;
  font-weight: 950;
}

body.logos-landing-page--hybrid .logos-story-panel__meta em {
  font-family: var(--logos-font-en, "Ray", sans-serif);
  font-size: .64rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.logos-landing-page--hybrid .logos-story-panel__heading {
  margin-top: clamp(.7rem, 1.25vh, 1rem);
}

body.logos-landing-page--hybrid .logos-story-panel__heading p {
  margin: 0 0 .28rem;
  color: var(--logos-story-muted);
  font-size: .8rem;
  font-weight: 580;
  line-height: 1.75;
}

body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
  margin: 0;
  color: var(--logos-story-ink);
  font-family: var(--logos-font-fa, "Ray", sans-serif);
  font-size: clamp(2.65rem, 3.15vw, 4.4rem);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 12px 36px rgba(0, 64, 46, .055);
}

body.logos-landing-page--hybrid .logos-story-panel__narrative {
  margin-top: clamp(1rem, 1.9vh, 1.4rem);
}

body.logos-landing-page--hybrid .logos-story-panel__narrative p {
  margin: 0 0 clamp(.72rem, 1.3vh, 1rem);
  color: rgba(18, 67, 55, .78);
  font-size: clamp(.9rem, .83vw, 1.03rem);
  font-weight: 430;
  line-height: 2.05;
  text-align: justify;
  text-justify: inter-word;
}

body.logos-landing-page--hybrid .logos-story-panel__narrative p:last-child {
  margin-bottom: 0;
}

body.logos-landing-page--hybrid .logos-story-panel__narrative .logos-story-panel__lede {
  color: var(--logos-story-ink);
  font-size: clamp(.98rem, .96vw, 1.12rem);
  font-weight: 620;
  line-height: 2;
  text-align: right;
}

body.logos-landing-page--hybrid .logos-story-panel__narrative--compact {
  max-width: 42rem;
}

/* =========================================================
   Core signals
   ========================================================= */
body.logos-landing-page--hybrid .logos-story-panel__core-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: clamp(1.15rem, 2.2vh, 1.7rem);
}

body.logos-landing-page--hybrid .logos-story-panel__core-signals > div {
  position: relative;
  min-width: 0;
  padding: .9rem .82rem .82rem;
  border: 1px solid color-mix(in srgb, var(--story-accent) 11%, transparent);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 14px 38px rgba(0, 77, 55, .035);
}

body.logos-landing-page--hybrid .logos-story-panel__core-signals i {
  display: block;
  width: .42rem;
  height: .42rem;
  margin-bottom: .58rem;
  border-radius: 50%;
  background: var(--story-accent);
  box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--story-accent) 10%, transparent);
}

body.logos-landing-page--hybrid .logos-story-panel__core-signals span,
body.logos-landing-page--hybrid .logos-story-panel__core-signals small {
  display: block;
}

body.logos-landing-page--hybrid .logos-story-panel__core-signals span {
  color: var(--logos-story-ink);
  font-size: .82rem;
  font-weight: 760;
}

body.logos-landing-page--hybrid .logos-story-panel__core-signals small {
  margin-top: .18rem;
  color: rgba(44, 91, 79, .46);
  font-family: var(--logos-font-en, "Ray", sans-serif);
  font-size: .53rem;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================================================
   KPI system
   ========================================================= */
body.logos-landing-page--hybrid .logos-story-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: clamp(1rem, 2vh, 1.5rem);
}

body.logos-landing-page--hybrid .logos-story-kpis article {
  position: relative;
  min-width: 0;
  min-height: 7.25rem;
  padding: 1rem .95rem .9rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--story-accent) 12%, transparent);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--story-accent) 10%, transparent), transparent 44%),
    rgba(255, 255, 255, .58);
  box-shadow: 0 18px 48px rgba(0, 73, 52, .045);
}

body.logos-landing-page--hybrid .logos-story-kpis article::after {
  content: "";
  position: absolute;
  right: .9rem;
  bottom: .75rem;
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--story-accent), transparent);
  opacity: .55;
}

body.logos-landing-page--hybrid .logos-story-kpis strong,
body.logos-landing-page--hybrid .logos-story-kpis span,
body.logos-landing-page--hybrid .logos-story-kpis small {
  display: block;
}

body.logos-landing-page--hybrid .logos-story-kpis strong {
  color: var(--story-accent);
  font-family: var(--logos-font-en, "Ray", sans-serif);
  font-size: clamp(1.15rem, 1.55vw, 1.85rem);
  font-weight: 950;
  letter-spacing: -.03em;
  line-height: 1;
}

body.logos-landing-page--hybrid .logos-story-kpis span {
  margin-top: .72rem;
  color: var(--logos-story-ink);
  font-size: .82rem;
  font-weight: 780;
}

body.logos-landing-page--hybrid .logos-story-kpis small {
  margin-top: .2rem;
  color: rgba(43, 87, 76, .42);
  font-family: var(--logos-font-en, "Ray", sans-serif);
  font-size: .51rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================================================
   Capabilities and outcome
   ========================================================= */
body.logos-landing-page--hybrid .logos-story-capabilities {
  margin-top: clamp(1rem, 2vh, 1.5rem);
}

body.logos-landing-page--hybrid .logos-story-capabilities__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .62rem;
}

body.logos-landing-page--hybrid .logos-story-capabilities__header span {
  color: var(--logos-story-ink);
  font-size: .84rem;
  font-weight: 800;
}

body.logos-landing-page--hybrid .logos-story-capabilities__header small {
  color: color-mix(in srgb, var(--story-accent) 72%, #315e52);
  font-family: var(--logos-font-en, "Ray", sans-serif);
  font-size: .5rem;
  font-weight: 900;
  letter-spacing: .12em;
}

body.logos-landing-page--hybrid .logos-story-capabilities__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .58rem;
}

body.logos-landing-page--hybrid .logos-story-capabilities__grid article {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  min-height: 3.3rem;
  padding: .72rem .75rem;
  border: 1px solid rgba(0, 114, 82, .075);
  border-radius: .95rem;
  background: rgba(255, 255, 255, .58);
}

body.logos-landing-page--hybrid .logos-story-capabilities__grid i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .58rem;
  color: var(--story-accent);
  background: color-mix(in srgb, var(--story-accent) 9%, #fff);
}

body.logos-landing-page--hybrid .logos-story-capabilities__grid svg {
  width: 1rem;
  height: 1rem;
}

body.logos-landing-page--hybrid .logos-story-capabilities__grid span {
  min-width: 0;
  color: rgba(15, 62, 50, .78);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.65;
}

body.logos-landing-page--hybrid .logos-story-outcome {
  position: relative;
  margin-top: .75rem;
  padding: .9rem 1rem .95rem;
  border: 1px solid color-mix(in srgb, var(--story-accent) 14%, transparent);
  border-radius: 1.05rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--story-accent) 7%, #fff),
    rgba(255, 255, 255, .72)
  );
}

body.logos-landing-page--hybrid .logos-story-outcome span {
  color: var(--story-accent);
  font-size: .72rem;
  font-weight: 850;
}

body.logos-landing-page--hybrid .logos-story-outcome p {
  margin: .26rem 0 0;
  color: rgba(13, 61, 48, .78);
  font-size: .79rem;
  font-weight: 580;
  line-height: 1.8;
}

/* =========================================================
   Bottom CTAs
   ========================================================= */
body.logos-landing-page--hybrid .logos-story-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  margin-top: clamp(1.2rem, 2.5vh, 1.9rem);
  padding-bottom: .25rem;
}

body.logos-landing-page--hybrid .logos-story-panel__actions .logos-button,
body.logos-landing-page--hybrid .logos-story-panel__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-width: 10.4rem;
  min-height: 3rem;
  border-radius: 999px;
  font-family: var(--logos-font-fa, "Ray", sans-serif);
  font-size: .78rem;
  font-weight: 760;
  transition:
    transform 200ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

body.logos-landing-page--hybrid .logos-story-panel__more {
  border: 1px solid color-mix(in srgb, var(--story-accent) 19%, transparent);
  color: var(--logos-story-ink);
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 12px 32px rgba(0, 69, 49, .045);
  cursor: pointer;
}

body.logos-landing-page--hybrid .logos-story-panel__more svg {
  width: 1rem;
  height: 1rem;
}

body.logos-landing-page--hybrid .logos-story-panel__actions .logos-button:hover,
body.logos-landing-page--hybrid .logos-story-panel__actions .logos-button:focus-visible,
body.logos-landing-page--hybrid .logos-story-panel__more:hover,
body.logos-landing-page--hybrid .logos-story-panel__more:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--story-accent) 13%, transparent);
}

body.logos-landing-page--hybrid .logos-story-panel__progress {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(0, 118, 84, .035);
}

body.logos-landing-page--hybrid .logos-story-panel__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--story-accent));
  transition: width 520ms cubic-bezier(.22, 1, .36, 1), background 220ms ease;
}

/* =========================================================
   Desktop fit
   ========================================================= */
@media (min-width: 1180px) and (max-height: 820px) {
  body.logos-landing-page--hybrid .logos-editorial-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(32rem, .88fr);
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(59vw, 1040px, calc((100svh - 1.2rem) * 1.56)) !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__contents {
    padding-top: .65rem;
    padding-bottom: .8rem;
  }

  body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
    font-size: clamp(2.35rem, 2.75vw, 3.55rem);
  }

  body.logos-landing-page--hybrid .logos-story-panel__narrative p {
    font-size: .84rem;
    line-height: 1.9;
    margin-bottom: .62rem;
  }

  body.logos-landing-page--hybrid .logos-story-kpis article {
    min-height: 6.25rem;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  body.logos-landing-page--hybrid .logos-editorial-layout {
    grid-template-columns: minmax(0, 1fr) minmax(28rem, .92fr);
    gap: 1rem;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(58vw, 880px, calc((100svh - 2rem) * 1.48)) !important;
  }

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

/* =========================================================
   Mobile / tablet
   ========================================================= */
@media (max-width: 767px) {
  body.logos-landing-page--hybrid .logos-editorial-shell {
    height: auto !important;
    min-height: 100svh;
    padding: .45rem .45rem 1.25rem !important;
  }

  body.logos-landing-page--hybrid .logos-editorial-layout {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: 0;
    height: auto;
  }

  body.logos-landing-page--hybrid .logos-editorial-visual {
    order: 1;
    width: 100%;
  }

  body.logos-landing-page--hybrid .logos-editorial-content {
    order: 2;
    display: block;
    width: 100%;
    padding: 0 .35rem;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(100%, 760px) !important;
    aspect-ratio: 760 / 1240 !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel {
    width: 100% !important;
    max-width: none;
    overflow: visible !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__contents {
    overflow: visible;
    padding: .95rem .55rem 1.2rem;
  }

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

  body.logos-landing-page--hybrid .logos-story-panel__narrative p {
    font-size: .9rem;
    line-height: 1.9;
    text-align: right;
  }

  body.logos-landing-page--hybrid .logos-story-panel__core-signals,
  body.logos-landing-page--hybrid .logos-story-kpis {
    grid-template-columns: 1fr;
  }

  body.logos-landing-page--hybrid .logos-story-kpis article {
    min-height: 5.5rem;
  }

  body.logos-landing-page--hybrid .logos-story-capabilities__grid {
    grid-template-columns: 1fr;
  }

  body.logos-landing-page--hybrid .logos-story-panel__actions {
    align-items: stretch;
    flex-direction: column;
  }

  body.logos-landing-page--hybrid .logos-story-panel__actions .logos-button,
  body.logos-landing-page--hybrid .logos-story-panel__more {
    width: 100%;
  }

  body.logos-landing-page--hybrid .logos-story-panel__progress {
    position: sticky;
  }
}

/* =========================================================
   Performance tiers
   ========================================================= */
html.logos-perf-balanced body.logos-landing-page--hybrid .logos-v21-orbits,
html.logos-perf-low body.logos-landing-page--hybrid .logos-v21-orbits {
  animation: none !important;
}

html.logos-perf-low body.logos-landing-page--hybrid .logos-v21-core,
html.logos-perf-low body.logos-landing-page--hybrid .logos-v21-core-halo,
html.logos-perf-low body.logos-landing-page--hybrid .logos-hybrid-connector__pulse {
  animation: none !important;
}

html.logos-perf-low body.logos-landing-page--hybrid [data-visual-module].is-story-active {
  filter: brightness(1.04) !important;
}

html.logos-perf-low body.logos-landing-page--hybrid .logos-story-panel__ambient,
html.logos-perf-low body.logos-landing-page--hybrid .logos-story-panel::after {
  display: none !important;
}

body.logos-landing-page--hybrid .logos-landing--hybrid.is-scene-offscreen * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  body.logos-landing-page--hybrid .logos-story-panel__content,
  body.logos-landing-page--hybrid [data-story-line] {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel::after {
    display: none !important;
  }
}

/* =========================================================
   LOGOS Hero v30 — fixed viewport editorial refinements
   - core narrative has no signal cards
   - CTAs live in a persistent dock
   - constellation position never shifts between stories
   ========================================================= */

/* Keep the left constellation anchored to one optical center on desktop. */
@media (min-width: 768px) {
  body.logos-landing-page--hybrid .logos-editorial-visual {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  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% - .45rem), 0) !important;
  }
}

/* The first/core story is intentionally pure long-form narrative. */
body.logos-landing-page--hybrid
.logos-story-panel__content--core
.logos-story-panel__core-signals {
  display: none !important;
}

/* Reserve a real, non-scrolling footer for the two primary actions. */
body.logos-landing-page--hybrid .logos-story-panel__contents {
  padding-bottom: clamp(.7rem, 1.4vh, 1.05rem);
}

body.logos-landing-page--hybrid .logos-story-panel__dock {
  position: relative;
  z-index: 12;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  min-height: 4.35rem;
  padding:
    .72rem
    clamp(.95rem, 1.45vw, 1.45rem)
    .78rem
    clamp(.7rem, 1vw, 1.15rem);
  border-top: 1px solid color-mix(in srgb, var(--story-accent) 11%, transparent);
  background:
    linear-gradient(
      180deg,
      rgba(248, 255, 252, .2),
      rgba(248, 255, 252, .93) 30%,
      rgba(248, 255, 252, .98)
    );
  box-shadow: 0 -18px 42px rgba(0, 78, 56, .035);
  isolation: isolate;
}

body.logos-landing-page--hybrid .logos-story-panel__dock::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 78% 120%,
      color-mix(in srgb, var(--story-accent) 10%, transparent),
      transparent 48%
    );
}

body.logos-landing-page--hybrid .logos-story-panel__dock .logos-button,
body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-width: 10.4rem;
  min-height: 3rem;
  border-radius: 999px;
  font-family: var(--logos-font-fa, "Ray", sans-serif);
  font-size: .78rem;
  font-weight: 760;
  transition:
    transform 200ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

body.logos-landing-page--hybrid .logos-story-panel__dock .logos-button:hover,
body.logos-landing-page--hybrid .logos-story-panel__dock .logos-button:focus-visible,
body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more:hover,
body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--story-accent) 13%, transparent);
}

/* Progress stays attached to the true bottom edge, beneath the action dock. */
body.logos-landing-page--hybrid .logos-story-panel__progress {
  z-index: 14;
}

/* Keep article height changes isolated from the grid and the constellation. */
body.logos-landing-page--hybrid .logos-story-panel__content {
  contain: layout style;
}

@media (min-width: 1180px) and (max-height: 820px) {
  body.logos-landing-page--hybrid .logos-story-panel__dock {
    min-height: 3.85rem;
    padding-top: .48rem;
    padding-bottom: .52rem;
  }

  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.7rem;
  }
}

@media (max-width: 767px) {
  body.logos-landing-page--hybrid .logos-hybrid-scene {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock {
    position: sticky;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    margin-inline: -.35rem;
    padding: .72rem .9rem calc(.78rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.15rem 1.15rem 0 0;
    background: rgba(248, 255, 252, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  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%;
  }
}

html.logos-perf-low body.logos-landing-page--hybrid .logos-story-panel__dock {
  background: #f8fffc;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================================================
   LOGOS Hero v31 — integrated CTA dock + compact core story
   ========================================================= */

/* The CTA area is part of the editorial surface, not a white footer card. */
body.logos-landing-page--hybrid .logos-story-panel__dock {
  min-height: 4rem;
  padding:
    .55rem
    clamp(.25rem, .65vw, .7rem)
    .62rem
    clamp(.7rem, 1vw, 1.15rem);
  border-top: 0;
  background: transparent;
  box-shadow: none;
  isolation: auto;
}

body.logos-landing-page--hybrid .logos-story-panel__dock::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: clamp(.25rem, .65vw, .7rem);
  left: clamp(.7rem, 1vw, 1.15rem);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--story-accent) 18%, transparent) 22%,
    color-mix(in srgb, var(--story-accent) 9%, transparent) 72%,
    transparent
  );
}

body.logos-landing-page--hybrid .logos-story-panel__dock > * {
  position: relative;
  z-index: 1;
}

body.logos-landing-page--hybrid .logos-story-panel__dock .logos-button {
  border: 1px solid color-mix(in srgb, var(--story-accent) 20%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--story-accent) 78%, #004f3d),
      color-mix(in srgb, var(--story-accent) 94%, #008d65)
    );
  box-shadow:
    0 12px 30px color-mix(in srgb, var(--story-accent) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .2);
}

body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more {
  border-color: color-mix(in srgb, var(--story-accent) 16%, transparent);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--story-accent) 5%, transparent),
      color-mix(in srgb, var(--story-accent) 2%, transparent)
    );
  box-shadow: none;
}

body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more:hover,
body.logos-landing-page--hybrid .logos-story-panel__dock .logos-story-panel__more:focus-visible {
  border-color: color-mix(in srgb, var(--story-accent) 28%, transparent);
  background: color-mix(in srgb, var(--story-accent) 7%, transparent);
}

/* The first view stays editorial and compact enough to breathe above the CTAs. */
body.logos-landing-page--hybrid
.logos-story-panel__content--core
.logos-story-panel__narrative--long {
  max-width: 45rem;
  margin-top: clamp(.85rem, 1.55vh, 1.15rem);
}

body.logos-landing-page--hybrid
.logos-story-panel__content--core
.logos-story-panel__narrative--long p {
  margin-bottom: clamp(.55rem, 1.05vh, .78rem);
  font-size: clamp(.88rem, .78vw, .98rem);
  line-height: 1.92;
}

body.logos-landing-page--hybrid
.logos-story-panel__content--core
.logos-story-panel__narrative--long .logos-story-panel__lede {
  font-size: clamp(.96rem, .9vw, 1.08rem);
  line-height: 1.9;
}

@media (min-width: 1180px) and (max-height: 820px) {
  body.logos-landing-page--hybrid .logos-story-panel__dock {
    min-height: 3.55rem;
    padding-top: .38rem;
    padding-bottom: .42rem;
  }

  body.logos-landing-page--hybrid
  .logos-story-panel__content--core
  .logos-story-panel__narrative--long p {
    margin-bottom: .42rem;
    font-size: .82rem;
    line-height: 1.78;
  }
}

@media (max-width: 767px) {
  body.logos-landing-page--hybrid .logos-story-panel__dock {
    position: sticky;
    bottom: 0;
    margin-inline: 0;
    padding: .65rem 0 calc(.7rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    background: linear-gradient(
      180deg,
      rgba(248, 255, 252, 0),
      rgba(248, 255, 252, .9) 38%,
      rgba(248, 255, 252, .96)
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock::before {
    right: 0;
    left: 0;
  }
}

html.logos-perf-low body.logos-landing-page--hybrid .logos-story-panel__dock {
  background: transparent;
}

/* =========================================================
   LOGOS Hero v32 — Viewport Fill / 100% Zoom Balance
   Fixes the inherited two-row shell that left an empty lower viewport,
   enlarges the constellation, and keeps the editorial panel full-height.
   ========================================================= */

/*
 * .logos-editorial-shell also carries .logos-hybrid-shell.
 * The old hero defined two grid rows for the former top copy + scene.
 * V29+ removed the top copy, so the second empty row was still reserving
 * a large blank area below the current editorial layout.
 */
body.logos-landing-page--hybrid .logos-editorial-shell {
  display: block !important;
  width: min(100%, 1980px) !important;
  height: 100svh !important;
  min-height: 660px;
  padding:
    clamp(.42rem, .8vh, .72rem)
    clamp(.7rem, 1.45vw, 2rem)
    clamp(.42rem, .8vh, .72rem) !important;
}

body.logos-landing-page--hybrid .logos-editorial-layout {
  grid-template-columns:
    minmax(0, 1.24fr)
    minmax(33.5rem, .76fr);
  gap: clamp(.75rem, 1.35vw, 1.8rem);
  width: 100%;
  height: 100%;
  min-height: 0;
}

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

body.logos-landing-page--hybrid .logos-editorial-content {
  align-items: stretch;
  padding:
    clamp(.8rem, 1.6vh, 1.45rem)
    clamp(.1rem, .45vw, .55rem)
    clamp(.35rem, .75vh, .7rem);
}

body.logos-landing-page--hybrid .logos-story-panel {
  height: 100%;
  max-width: 51rem;
}

/* Fill the left viewport more confidently at browser zoom 100%. */
@media (min-width: 1281px) {
  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width:
      min(
        66vw,
        1240px,
        calc((100svh - 1rem) * 1.78)
      ) !important;
    max-width: none;
    transform:
      translate3d(-50%, calc(-50% + .55rem), 0)
      scale(1.075) !important;
  }

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

  body.logos-landing-page--hybrid
  .logos-story-panel__content--core
  .logos-story-panel__narrative--long p {
    font-size: clamp(.91rem, .83vw, 1.02rem);
    line-height: 1.96;
  }
}

/* The first narrative uses the available vertical space instead of hugging the top. */
@media (min-width: 768px) {
  body.logos-landing-page--hybrid .logos-story-panel__content--core {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(.45rem, 1.25vh, 1rem);
  }

  body.logos-landing-page--hybrid .logos-story-panel__contents {
    padding-top: clamp(.55rem, 1.05vh, .95rem);
    padding-bottom: clamp(.55rem, 1.05vh, .95rem);
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock {
    flex: 0 0 auto;
  }
}

/* Laptop-height tuning: still fills the viewport without clipping. */
@media (min-width: 1180px) and (max-height: 820px) {
  body.logos-landing-page--hybrid .logos-editorial-layout {
    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(31.5rem, .8fr);
    gap: .8rem;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width:
      min(
        64vw,
        1120px,
        calc((100svh - .7rem) * 1.72)
      ) !important;
    transform:
      translate3d(-50%, calc(-50% + .35rem), 0)
      scale(1.055) !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
    font-size: clamp(2.55rem, 3vw, 3.85rem);
  }
}

/* Medium desktop / small laptop widths. */
@media (min-width: 768px) and (max-width: 1280px) {
  body.logos-landing-page--hybrid .logos-editorial-layout {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(28rem, .92fr);
    gap: .65rem;
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width:
      min(
        61vw,
        980px,
        calc((100svh - 1rem) * 1.62)
      ) !important;
    max-width: none;
    transform:
      translate3d(-50%, calc(-50% + .3rem), 0)
      scale(1.035) !important;
  }
}

/* Mobile retains its natural document flow. */
@media (max-width: 767px) {
  body.logos-landing-page--hybrid .logos-editorial-shell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh;
    padding: .45rem .45rem 1.25rem !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__content--core {
    min-height: 0;
    display: block;
    padding-block: 0;
  }
}

/* =========================================================
   LOGOS Hero v33 — Full Viewport Circuit Frame
   Vector-only HUD border inspired by the supplied reference.
   ========================================================= */
body.logos-landing-page--hybrid .logos-stage {
  position: relative;
  isolation: isolate;
}

body.logos-landing-page--hybrid .logos-editorial-shell {
  position: relative;
  z-index: 10;
}

body.logos-landing-page--hybrid .logos-viewport-frame {
  position: absolute;
  z-index: 8;
  inset:
    max(.58rem, env(safe-area-inset-top, 0px))
    max(.62rem, env(safe-area-inset-right, 0px))
    max(.58rem, env(safe-area-inset-bottom, 0px))
    max(.62rem, env(safe-area-inset-left, 0px));
  width: auto;
  height: auto;
  overflow: visible;
  pointer-events: none;
  opacity: .94;
  contain: strict;
}

body.logos-landing-page--hybrid .logos-viewport-frame__glow {
  opacity: .46;
}

body.logos-landing-page--hybrid .logos-viewport-frame__rails {
  opacity: .95;
}

body.logos-landing-page--hybrid .logos-viewport-frame__status {
  opacity: .9;
}

/* The supplied reference has no separator rails around the CTA pair. */
body.logos-landing-page--hybrid .logos-story-panel__dock {
  border: 0 !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 {
  display: none !important;
}

/* Keep the actions floating cleanly inside the frame. */
body.logos-landing-page--hybrid .logos-story-panel__dock {
  padding-top: .38rem;
  padding-bottom: .42rem;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  body.logos-landing-page--hybrid .logos-viewport-frame {
    inset:
      max(.28rem, env(safe-area-inset-top, 0px))
      max(.28rem, env(safe-area-inset-right, 0px))
      max(.28rem, env(safe-area-inset-bottom, 0px))
      max(.28rem, env(safe-area-inset-left, 0px));
    opacity: .62;
  }

  body.logos-landing-page--hybrid .logos-viewport-frame__status {
    display: none;
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock {
    border-radius: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

html.logos-perf-low body.logos-landing-page--hybrid .logos-viewport-frame__glow {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.logos-landing-page--hybrid .logos-viewport-frame {
    opacity: .88;
  }
}

/* =========================================================
   LOGOS Hero v34 — Reference HUD Frame (robust viewport mount)
   The previous SVG was the positioned element itself and could keep its
   intrinsic 300x150 size. V34 uses a fixed wrapper and a full-size child SVG.
   ========================================================= */
body.logos-landing-page--hybrid .logos-viewport-frame {
  position: fixed !important;
  z-index: 58 !important;
  top: max(.8rem, env(safe-area-inset-top, 0px)) !important;
  right: max(.8rem, env(safe-area-inset-right, 0px)) !important;
  bottom: max(.8rem, env(safe-area-inset-bottom, 0px)) !important;
  left: max(.8rem, env(safe-area-inset-left, 0px)) !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  contain: none !important;
  isolation: isolate;
}

body.logos-landing-page--hybrid .logos-viewport-frame__svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

body.logos-landing-page--hybrid .logos-viewport-frame__halo {
  opacity: .52;
}

body.logos-landing-page--hybrid .logos-viewport-frame__outer,
body.logos-landing-page--hybrid .logos-viewport-frame__rails {
  opacity: .98;
}

body.logos-landing-page--hybrid .logos-viewport-frame__status {
  opacity: .9;
}

/* Leave a protected breathing zone inside the frame without changing layout. */
@media (min-width: 768px) {
  body.logos-landing-page--hybrid .logos-editorial-shell {
    padding:
      max(.35rem, env(safe-area-inset-top, 0px))
      max(1.05rem, env(safe-area-inset-right, 0px))
      max(.35rem, env(safe-area-inset-bottom, 0px))
      max(1.05rem, env(safe-area-inset-left, 0px)) !important;
  }
}

/* Remove every rail/line around the CTA group, including inherited rules. */
body.logos-landing-page--hybrid .logos-story-panel__dock {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: 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::before,
body.logos-landing-page--hybrid .logos-story-panel__progress::after,
body.logos-landing-page--hybrid .logos-story-panel__progress span {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

@media (max-width: 767px) {
  body.logos-landing-page--hybrid .logos-viewport-frame {
    top: max(.34rem, env(safe-area-inset-top, 0px)) !important;
    right: max(.34rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(.34rem, env(safe-area-inset-bottom, 0px)) !important;
    left: max(.34rem, env(safe-area-inset-left, 0px)) !important;
    opacity: .68 !important;
  }

  body.logos-landing-page--hybrid .logos-viewport-frame__status {
    display: none !important;
  }

  body.logos-landing-page--hybrid .logos-viewport-frame__halo {
    opacity: .26;
  }
}

html.logos-perf-low body.logos-landing-page--hybrid .logos-viewport-frame__halo {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.logos-landing-page--hybrid .logos-viewport-frame__halo {
    filter: none !important;
  }
}

/* =========================================================
   LOGOS Hero v35 — Responsive Safe Frame
   Keeps the HUD frame visible without covering content at 100% zoom.
   The frame sits below the application layer and every breakpoint gets
   a real protected content inset instead of relying on visual overlap.
   ========================================================= */
body.logos-landing-page--hybrid {
  --logos-frame-inset-x: clamp(.65rem, .85vw, 1rem);
  --logos-frame-inset-y: clamp(.65rem, .9vh, 1rem);
  --logos-frame-safe-x: clamp(3.25rem, 4vw, 4.75rem);
  --logos-frame-safe-y: clamp(2.35rem, 3.6vh, 3.25rem);
}

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

/* The frame is decorative. It must never sit above text, CTAs or modules. */
body.logos-landing-page--hybrid .logos-viewport-frame {
  z-index: 4 !important;
  top: max(var(--logos-frame-inset-y), env(safe-area-inset-top, 0px)) !important;
  right: max(var(--logos-frame-inset-x), env(safe-area-inset-right, 0px)) !important;
  bottom: max(var(--logos-frame-inset-y), env(safe-area-inset-bottom, 0px)) !important;
  left: max(var(--logos-frame-inset-x), env(safe-area-inset-left, 0px)) !important;
  opacity: .82 !important;
}

body.logos-landing-page--hybrid .logos-viewport-frame__halo {
  opacity: .25 !important;
}

body.logos-landing-page--hybrid .logos-viewport-frame__outer,
body.logos-landing-page--hybrid .logos-viewport-frame__rails {
  opacity: .82 !important;
}

body.logos-landing-page--hybrid .logos-viewport-frame__status {
  opacity: .72 !important;
}

/* The real responsive safe area. */
body.logos-landing-page--hybrid .logos-editorial-shell {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1980px;
  height: 100svh !important;
  min-height: 640px;
  padding:
    max(var(--logos-frame-safe-y), env(safe-area-inset-top, 0px))
    max(var(--logos-frame-safe-x), env(safe-area-inset-right, 0px))
    max(var(--logos-frame-safe-y), env(safe-area-inset-bottom, 0px))
    max(var(--logos-frame-safe-x), env(safe-area-inset-left, 0px)) !important;
}

body.logos-landing-page--hybrid .logos-editorial-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(31rem, .92fr);
  gap: clamp(1rem, 1.7vw, 2.25rem);
}

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-content {
  padding: clamp(.15rem, .55vh, .5rem) 0;
  overflow: hidden;
}

body.logos-landing-page--hybrid .logos-story-panel {
  max-width: 47rem;
}

body.logos-landing-page--hybrid .logos-story-panel__contents {
  padding-inline: clamp(.2rem, .55vw, .7rem);
  padding-top: clamp(.35rem, .75vh, .7rem);
  padding-bottom: clamp(.5rem, 1vh, .9rem);
}

body.logos-landing-page--hybrid .logos-story-panel__heading,
body.logos-landing-page--hybrid .logos-story-panel__narrative,
body.logos-landing-page--hybrid .logos-story-panel__dock {
  max-width: 100%;
}

body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Keep the constellation completely inside the left safe area. */
@media (min-width: 1280px) {
  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width:
      min(
        57vw,
        1080px,
        calc((100svh - (var(--logos-frame-safe-y) * 2)) * 1.58)
      ) !important;
    max-width: 100% !important;
    transform:
      translate3d(-50%, calc(-50% + .15rem), 0)
      scale(1.015) !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__heading h2 {
    font-size: clamp(2.55rem, 3.05vw, 4.15rem);
  }
}

/* Short desktop screens need a slightly tighter safe area, not overlap. */
@media (min-width: 1101px) and (max-height: 760px) {
  body.logos-landing-page--hybrid {
    --logos-frame-safe-y: 1.8rem;
    --logos-frame-safe-x: clamp(2.8rem, 3.4vw, 4rem);
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width:
      min(
        55vw,
        980px,
        calc((100svh - 3.6rem) * 1.5)
      ) !important;
    transform:
      translate3d(-50%, -50%, 0)
      scale(.985) !important;
  }

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

/* Tablet and narrow laptop: stack instead of squeezing under the frame. */
@media (min-width: 768px) and (max-width: 1100px) {
  body.logos-landing-page--hybrid {
    --logos-frame-safe-x: clamp(2rem, 3.2vw, 2.75rem);
    --logos-frame-safe-y: clamp(1.8rem, 3vh, 2.5rem);
  }

  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: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: auto;
  }

  body.logos-landing-page--hybrid .logos-editorial-visual {
    min-height: clamp(27rem, 64vw, 38rem);
  }

  body.logos-landing-page--hybrid .logos-hybrid-scene {
    width: min(91vw, 900px) !important;
    max-width: 100% !important;
    transform: translate3d(-50%, -50%, 0) scale(.97) !important;
  }

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

  body.logos-landing-page--hybrid .logos-story-panel {
    max-width: none;
    min-height: min(42rem, 78svh);
  }

  body.logos-landing-page--hybrid .logos-viewport-frame__status {
    display: none !important;
  }
}

/* Mobile gets a quieter frame and a protected scrolling document. */
@media (max-width: 767px) {
  body.logos-landing-page--hybrid {
    --logos-frame-inset-x: .28rem;
    --logos-frame-inset-y: .28rem;
    --logos-frame-safe-x: 1.05rem;
    --logos-frame-safe-y: 1.15rem;
  }

  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-frame-safe-y) + env(safe-area-inset-top, 0px))
      calc(var(--logos-frame-safe-x) + env(safe-area-inset-right, 0px))
      calc(1.6rem + env(safe-area-inset-bottom, 0px))
      calc(var(--logos-frame-safe-x) + env(safe-area-inset-left, 0px)) !important;
  }

  body.logos-landing-page--hybrid .logos-viewport-frame {
    opacity: .44 !important;
  }

  body.logos-landing-page--hybrid .logos-viewport-frame__halo,
  body.logos-landing-page--hybrid .logos-viewport-frame__status {
    display: none !important;
  }

  body.logos-landing-page--hybrid .logos-viewport-frame__rails {
    opacity: .5 !important;
  }

  body.logos-landing-page--hybrid .logos-story-panel__dock {
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
  }
}

/* The CTA pair must never collide with the bottom HUD rail. */
body.logos-landing-page--hybrid .logos-story-panel__dock {
  position: relative;
  z-index: 12;
  margin-bottom: .15rem;
  padding-bottom: .25rem;
  border: 0 !important;
  background: transparent !important;
  box-shadow: 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;
}