.elara-page {
  --elara-ink: #1c2430;
  --elara-muted: #6b7785;
  --elara-blue: #7ec8f5;
  --elara-blue-deep: #3a9fd8;
  --elara-cell: #c43b3b;
  --elara-cell-deep: #8e1f2a;
  background: #f7f9fb;
  color: var(--elara-ink);
  overflow-x: visible;
  max-width: 100%;
}

body:has(.elara-page),
html:has(.elara-page) {
  overflow-x: hidden;
}

.elara-hero-wrap {
  position: relative;
  z-index: 2;
}

.elara-hero {
  height: 100vh;
  height: 100dvh;
  margin: 0;
}

.elara-hero-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.elara-minerals-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

/* Same mesh blobs as Desktop/sollus */
.elara-mesh-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.mesh-blob {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 1;
  will-change: transform, filter;
  pointer-events: none;
}

.mesh-blob-a {
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: linear-gradient(
    156.84deg,
    rgba(0, 255, 255, 0.2) 5.07%,
    rgba(0, 176, 204, 0.2) 25.86%,
    rgba(0, 119, 204, 0.2) 48.11%,
    rgba(0, 51, 238, 0.2) 68.9%,
    rgba(0, 0, 255, 0.2) 101.78%
  );
}

.mesh-blob-b {
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  background: linear-gradient(
    156.84deg,
    rgba(0, 255, 255, 0.2) 5.07%,
    rgba(0, 176, 204, 0.2) 25.86%,
    rgba(0, 119, 204, 0.2) 48.11%,
    rgba(0, 51, 238, 0.2) 68.9%,
    rgba(0, 0, 255, 0.2) 101.78%
  );
}

.mesh-blob-c {
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  background: linear-gradient(
    159.39deg,
    rgba(168, 240, 212, 0.2) -0.8%,
    rgba(109, 232, 181, 0.2) 21.08%,
    rgba(20, 184, 166, 0.2) 44.49%,
    rgba(13, 148, 136, 0.2) 66.37%,
    rgba(45, 212, 191, 0.2) 100.98%
  );
}

.mesh-blob-home-a {
  top: 18vh;
  left: -3.5rem;
}

.mesh-blob-home-b {
  top: 46vh;
  right: -4rem;
  left: auto;
}

.mesh-blob-home-c {
  top: 60vh;
  left: 10vw;
}

@media (prefers-reduced-motion: reduce) {
  .mesh-blob {
    animation: none;
  }
}

.elara-chapters {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10rem 2.4rem 8rem;
  pointer-events: none;
}

.elara-chapter {
  grid-area: 1 / 1;
  width: min(72rem, 100%);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.elara-chapter.is-hero {
  opacity: 0;
  visibility: hidden;
}

.elara-chapter.is-diagnostics,
.elara-chapter.is-ai,
.elara-chapter.is-minerals,
.elara-chapter.is-protocols,
.elara-chapter.is-practice,
.elara-chapter.is-remeasure {
  text-align: left;
  justify-self: start;
  width: min(48rem, calc(100% - 4.8rem));
  margin-left: clamp(2.4rem, 6vw, 8rem);
}

.elara-chapter-title {
  margin: 0;
  color: var(--elara-ink);
  font-family: "Playfair Display", "Marcellus", serif;
  font-size: clamp(3.2rem, 4.8vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.elara-chapter-body {
  max-width: 48rem;
  margin: 1.6rem auto 0;
  color: var(--elara-muted);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.35rem, 1.35vw, 1.65rem);
  font-weight: 400;
  line-height: 1.55;
}

.elara-chapter.is-diagnostics .elara-chapter-body,
.elara-chapter.is-ai .elara-chapter-body,
.elara-chapter.is-minerals .elara-chapter-body,
.elara-chapter.is-protocols .elara-chapter-body,
.elara-chapter.is-practice .elara-chapter-body,
.elara-chapter.is-remeasure .elara-chapter-body {
  margin-left: 0;
  max-width: 42rem;
}

/* Right-center slide indicator — active label + longer blue bar */
.elara-rail {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  padding-right: 0;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.elara-rail.is-visible {
  opacity: 1;
}

.elara-rail-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
}

.elara-rail-label {
  color: var(--elara-blue);
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(0.4rem);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    color 0.35s ease;
}

.elara-rail-item.is-active .elara-rail-label {
  opacity: 1;
  transform: translateX(0);
}

.elara-rail-line {
  display: block;
  width: 1.35rem;
  height: 2px;
  border-radius: 1px;
  background: rgba(28, 36, 48, 0.22);
  transition:
    width 0.35s ease,
    background 0.35s ease;
}

.elara-rail-item.is-active .elara-rail-line {
  width: 2.75rem;
  background: var(--elara-blue);
}

.elara-viz {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.elara-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(32rem, 52vw);
  z-index: 5;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity;
}

.elara-phone-bezel,
.elara-phone-top,
.elara-phone-orb-wrap,
.elara-phone-status {
  will-change: opacity, filter, transform;
}

.elara-phone-bezel {
  border-radius: 3.2rem;
  padding: 0;
  background: #ffffff;
  box-shadow:
    0 2.8rem 6rem rgba(20, 50, 90, 0.14),
    0 0.4rem 1.2rem rgba(20, 50, 90, 0.06);
}

.elara-phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 3.2rem;
  aspect-ratio: 9 / 16;
  background: #ffffff;
}

.elara-phone-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.35rem 1.8rem 0;
  pointer-events: none;
}

.elara-phone-time {
  color: #b8c0cc;
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

.elara-phone-island {
  width: 7.2rem;
  height: 1.55rem;
  border-radius: 999px;
  background: #e8ecf1;
  justify-self: center;
}

.elara-phone-dots {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.38rem;
}

.elara-phone-dots i {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #9eb8d4;
}

.elara-phone-top {
  position: absolute;
  top: 5.2rem;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0 1.6rem;
  pointer-events: none;
}

.elara-phone-logo {
  display: block;
  width: 2.45rem;
  height: auto;
  flex-shrink: 0;
}

.elara-phone-label {
  color: #1c2430;
  font-family: "Marcellus", serif;
  font-size: clamp(1.7rem, 2.8vw, 2.15rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.elara-phone-orb-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  transform: translate(-50%, -50%);
}

.elara-free-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(48rem, 52vw);
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: width, height, opacity;
  pointer-events: none;
}

.elara-free-orb .elara-orb.is-orb-interactive {
  pointer-events: auto;
}

.elara-orb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
}

.elara-orb-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

.elara-orb.is-orb-interactive {
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  z-index: 6;
}

.elara-orb.is-orb-interactive:active {
  cursor: grabbing;
}

.elara-orb.is-orb-interactive .elara-orb-canvas {
  pointer-events: auto;
}

.elara-orb-core,
.elara-orb-ring,
.elara-orb-mesh {
  display: none;
}

.elara-cells {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.elara-cell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(7rem, 9vw, 11rem);
  margin: 0;
  opacity: 0;
  will-change: left, top, transform, opacity, filter;
}

.elara-cell img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1rem 2rem rgba(120, 20, 30, 0.28));
  user-select: none;
  pointer-events: none;
}

/* Size map — left/top/rotation driven by ElaraHero scrub */
.elara-cell.is-tl {
  width: clamp(8rem, 10vw, 12rem);
  z-index: 7;
}

.elara-cell.is-bl {
  width: clamp(6rem, 7.5vw, 9rem);
  z-index: 7;
}

.elara-cell.is-mr {
  width: clamp(7rem, 8.5vw, 10rem);
  z-index: 7;
}

.elara-cell.is-br {
  width: clamp(11rem, 15vw, 18rem);
  z-index: 7;
}

/* Minerals / protocols live inside the pinned hero stage (one viewport, no fixed duplicate) */
.elara-minerals {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.elara-minerals-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.elara-minerals-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

/* Same chapter slot / type as Diagnostics + Sollus AI */
.elara-minerals-chapters {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10rem 2.4rem 8rem;
  pointer-events: none;
}

.elara-minerals-chapters .elara-chapter {
  opacity: 0;
  visibility: hidden;
  transition: none;
  will-change: transform, opacity;
}

/* Bottle — viewport center, rotateY flip between faces */
.elara-minerals-viz {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(34rem, 32vw);
  transform: translate(-50%, -50%);
  perspective: 1400px;
  perspective-origin: 50% 45%;
  pointer-events: none;
}

.elara-minerals-viz.is-protocols {
  /* Protocol bottle (girl card) — true optical center */
  top: 50%;
  width: min(36rem, 34vw);
}

.elara-bottle-spin {
  position: relative;
  width: 100%;
  aspect-ratio: 582 / 1024;
  transform-style: preserve-3d;
}

.elara-bottle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

.elara-bottle.is-minerals {
  opacity: 1;
}

.elara-bottle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  filter: drop-shadow(0 2.4rem 4rem rgba(20, 50, 70, 0.16));
  user-select: none;
  pointer-events: none;
}

.elara-bottle.is-protocols img {
  /* Keep girl card optically centered in the frame */
  object-position: center 46%;
}

/* Minerals app phone — inner content scrolls mineral plan → wellness */
.elara-minerals-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(34rem, 34vw);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.elara-minerals-phone-bezel {
  border-radius: 3.4rem;
  padding: 0.55rem;
  background: #fff;
  box-shadow:
    0 2.4rem 5rem rgba(20, 50, 90, 0.14),
    0 0.4rem 1.2rem rgba(20, 50, 90, 0.06);
}

.elara-minerals-phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 2.9rem;
  aspect-ratio: 9 / 17.2;
  background: #eef3f7;
}

.elara-minerals-phone-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem 1.5rem 0;
  pointer-events: none;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #9aa6b4;
}

.elara-minerals-phone-island {
  width: 6.4rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #dde4eb;
  justify-self: center;
}

.elara-minerals-phone-signal {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
}

.elara-minerals-phone-signal i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #9eb8d4;
}

.elara-minerals-phone-viewport {
  position: absolute;
  inset: 3.4rem 0 0;
  overflow: hidden;
}

.elara-minerals-phone-scroll {
  width: 100%;
  will-change: transform;
}

.elara-app-plan {
  padding: 0.4rem 1.35rem 1.6rem;
  box-sizing: border-box;
}

.elara-app-plan.is-minerals {
  background: #fff;
  border-radius: 1.8rem;
  margin: 0 0.85rem;
  padding: 1.4rem 1.2rem 1.2rem;
  box-shadow: 0 0.8rem 2rem rgba(30, 50, 70, 0.06);
}

.elara-app-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.elara-app-plan-head h3,
.elara-app-plan.is-wellness h3 {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #1a3358;
}

.elara-app-plan-badge {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: #d9eaf8;
  color: #1a4a7a;
  font-family: "Montserrat", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.elara-app-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.elara-app-plan-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1rem;
  background: #f4f7fa;
}

.elara-app-plan-icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a3358;
}

.elara-app-plan-icon.is-mg {
  background: #cfe6f8;
}
.elara-app-plan-icon.is-d3 {
  background: #f7dfc4;
}
.elara-app-plan-icon.is-zn {
  background: #d5efd8;
}
.elara-app-plan-icon.is-b12 {
  background: #e4d8f5;
}
.elara-app-plan-icon.is-omega {
  background:
    radial-gradient(circle at 35% 40%, #f0c56a 0 38%, transparent 40%),
    radial-gradient(circle at 68% 58%, #e8b24a 0 32%, transparent 34%), #f7efd8;
}

.elara-app-plan-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.elara-app-plan-copy strong {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a3358;
}

.elara-app-plan-copy em {
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-size: 1rem;
  color: #8a96a4;
}

.elara-app-plan-chev {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid #1a3358;
  border-bottom: 1.5px solid #1a3358;
  transform: rotate(-45deg);
  opacity: 0.55;
}

.elara-app-plan-link {
  margin: 1.1rem 0 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a4a7a;
}

.elara-app-plan.is-wellness {
  margin-top: 1.4rem;
  padding: 0.2rem 1.35rem 1.8rem;
}

.elara-app-plan.is-wellness h3 {
  margin-bottom: 1rem;
  padding: 0 0.2rem;
}

.elara-app-plan-media {
  border-radius: 1.6rem;
  overflow: hidden;
  background: #dfe8f0;
  aspect-ratio: 3 / 3.6;
}

.elara-app-plan-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Practice girl — zooms out from phone wellness card */
.elara-practice {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(72rem, 48vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, width, height, left, top;
}

.elara-practice-orb {
  position: relative;
  width: 100%;
  aspect-ratio: 912 / 1024;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  /* Asset already has circular vignette — don't hard-clip it */
  -webkit-mask-image: none;
  mask-image: none;
}

.elara-practice-orb::after {
  display: none;
}

.elara-practice-orb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
  user-select: none;
  pointer-events: none;
}

/* Light page: keep glass nav readable */
body:has(.elara-page) .header.glass-nav {
  color: #1a1a1a;
}

body:has(.elara-page) .header.glass-nav .header-menu-link .txt,
body:has(.elara-page) .header.glass-nav .glass-nav-link {
  color: #1a1a1a;
}

@media screen and (max-width: 991px) {
  .elara-minerals-viz {
    width: min(30rem, 34vw);
  }
}

@media screen and (max-width: 767px) {
  .elara-page {
    overflow-x: visible;
  }

  .elara-hero {
    height: 920vh;
  }

  .elara-hero-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .elara-chapters,
  .elara-minerals-chapters {
    padding: 7rem 1.6rem 5rem;
    align-items: start;
  }

  .elara-chapter.is-diagnostics,
  .elara-chapter.is-ai,
  .elara-chapter.is-minerals,
  .elara-chapter.is-protocols,
  .elara-chapter.is-practice,
  .elara-chapter.is-remeasure {
    width: calc(100% - 1.2rem);
    margin-left: 0.6rem;
  }

  .elara-chapter-title {
    font-size: clamp(2.6rem, 8vw, 3.4rem);
  }

  .elara-chapter-body {
    font-size: clamp(1.15rem, 4vw, 1.4rem);
  }

  .elara-rail {
    display: none;
  }

  .elara-phone {
    width: min(28rem, 74vw);
  }

  .elara-free-orb {
    /* Match phone center so particle expand doesn't jump down */
    top: 50%;
    width: min(28rem, 74vw);
  }

  .elara-cell.is-br {
    left: 92%;
    top: 88%;
    width: clamp(8rem, 28vw, 12rem);
  }

  .elara-minerals {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .elara-minerals-stage {
    position: relative;
    height: 100%;
    overflow-x: clip;
  }

  .elara-minerals-chapters {
    z-index: 5;
    align-content: start;
    place-items: start stretch;
    padding: 6.4rem 1.6rem 0;
  }

  .elara-minerals-chapters .elara-chapter.is-minerals,
  .elara-minerals-chapters .elara-chapter.is-protocols,
  .elara-minerals-chapters .elara-chapter.is-practice,
  .elara-minerals-chapters .elara-chapter.is-remeasure {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .elara-minerals-chapters .elara-chapter-title {
    font-size: clamp(2.4rem, 7.2vw, 3.2rem);
  }

  .elara-minerals-chapters .elara-chapter-body {
    margin-top: 1rem;
    max-width: 36rem;
    font-size: clamp(1.05rem, 3.6vw, 1.25rem);
  }

  .elara-minerals-viz {
    left: 50%;
    top: auto;
    bottom: 6%;
    width: min(18rem, 48vw);
    transform: translateX(-50%);
  }

  .elara-minerals-viz.is-protocols {
    top: auto;
    bottom: 8%;
    width: min(20rem, 52vw);
  }

  .elara-minerals-phone {
    left: 50%;
    top: auto;
    bottom: 2.4rem;
    width: min(22rem, 56vw);
    transform: translateX(-50%);
    z-index: 4;
  }

  /* Match bottle slot on mobile — larger practice girl */
  .elara-practice {
    left: 50%;
    top: auto;
    bottom: 4%;
    width: min(52rem, 70vw);
    transform: translateX(-50%);
  }

  .elara-practice-orb {
    width: 100%;
    transform: none;
  }
}

/* ─── Health score section (after hero) ─── */
.elara-score {
  --score-ink: #1c2430;
  --score-muted: #8a94a0;
  --score-blue: #4aa7ef;
  --score-teal: #3ecfc4;
  --score-purple: #8b7cf0;
  --score-gold: #c4a574;
  --score-slate: #8fa3b8;
  --score-sky: #7ec8f5;
  --score-green: #7db88a;
  /* Equal straight line above + below watch circle */
  --score-gap: clamp(4.8rem, 6vw, 6.4rem);
  position: relative;
  z-index: 3;
  background: #f7f9fb;
  color: var(--score-ink);
  overflow: clip;
  /* Extra scroll runway so scrubbed reveals can breathe */
  /* padding-bottom: 8vh; */
}

body:has(.elara-page) .site-footer {
  position: relative;
  z-index: 20;
}

/* Hidden until site ScrollTrigger story paints them in */
.elara-score [data-score-hero],
.elara-score [data-score-kicker],
.elara-score [data-score-input],
.elara-score [data-score-converge-node],
.elara-score [data-score-devices],
.elara-score [data-score-devices-copy],
.elara-score [data-score-ring],
.elara-score [data-score-slider-track],
.elara-score [data-score-fan-node],
.elara-score [data-score-card],
.elara-score [data-score-results-bg] {
  opacity: 0;
  visibility: hidden;
}

.elara-score [data-score-spine-in],
.elara-score [data-score-spine-out] {
  transform: scaleY(0);
  transform-origin: top center;
}

.elara-score [data-score-fan-stem] {
  transform: scaleY(0);
  transform-origin: top center;
}

.elara-score [data-score-fan-cap] {
  transform: scaleY(0);
  transform-origin: bottom center;
}

.elara-score-inner {
  width: min(152rem, 100%);
  margin: 0 auto;
  padding: 9rem clamp(1.6rem, 3vw, 3.2rem) 0;
}

.elara-score-hero {
  text-align: center;
  max-width: 86rem;
  margin: 0 auto 6.4rem;
}

.elara-score-title {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(3.4rem, 5vw, 6.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--score-ink);
}

.elara-score-sub {
  margin: 1.6rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.5vw, 1.7rem);
  line-height: 1.5;
  color: var(--score-muted);
}

.elara-score-madeof {
  position: relative;
  padding-bottom: 0;
}

.elara-score-kicker {
  margin: 0 0 5.2rem;
  text-align: center;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 3vw, 3.6rem);
  color: var(--score-ink);
}

.elara-score-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 8rem);
  align-items: start;
  width: min(148rem, 100%);
  margin: 0 auto;
}

.elara-score-input {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.elara-score-input-pct {
  margin: 0 0 1.6rem;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(3.8rem, 4.4vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.elara-score-input-pct span {
  font-size: 0.55em;
  margin-left: 0.05em;
}

.elara-score-orb {
  position: relative;
  width: clamp(9.5rem, 11vw, 12.5rem);
  height: clamp(9.5rem, 11vw, 12.5rem);
  display: grid;
  place-items: center;
  margin-bottom: 2rem;
}

.elara-score-orb-glow {
  position: absolute;
  inset: -42%;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 1;
  pointer-events: none;
}

.elara-score-input.is-blue .elara-score-orb-glow {
  background: radial-gradient(
    circle,
    rgba(74, 167, 239, 0.9) 0%,
    rgba(74, 167, 239, 0.45) 38%,
    rgba(74, 167, 239, 0.14) 62%,
    transparent 78%
  );
}

.elara-score-input.is-teal .elara-score-orb-glow {
  background: radial-gradient(
    circle,
    rgba(62, 207, 196, 0.9) 0%,
    rgba(62, 207, 196, 0.45) 38%,
    rgba(62, 207, 196, 0.14) 62%,
    transparent 78%
  );
}

.elara-score-input.is-purple .elara-score-orb-glow {
  background: radial-gradient(
    circle,
    rgba(139, 124, 240, 0.9) 0%,
    rgba(139, 124, 240, 0.45) 38%,
    rgba(139, 124, 240, 0.14) 62%,
    transparent 78%
  );
}

.elara-score-orb-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Knock out black plate so glow sits on the light score bg */
  mix-blend-mode: screen;
  filter: drop-shadow(0 1.6rem 3.2rem rgba(20, 40, 60, 0.22));
  user-select: none;
  pointer-events: none;
}

.elara-score-input-title {
  margin: 0 0 0.9rem;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  line-height: 1.2;
}

.elara-score-input-body {
  margin: 0;
  max-width: 28rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.2vw, 1.4rem);
  line-height: 1.55;
  color: var(--score-muted);
}

/* Center vertical flow */
.elara-score-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  pointer-events: none;
}

.elara-score-flow-node {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(126, 200, 245, 0.28),
    0 0 22px rgba(74, 167, 239, 0.55);
  flex-shrink: 0;
  z-index: 1;
}

.elara-score-flow-line {
  display: block;
  width: 2px;
  height: clamp(7rem, 10vw, 11rem);
  background: linear-gradient(
    180deg,
    var(--score-sky),
    rgba(126, 200, 245, 0.35)
  );
  border-radius: 2px;
  transform-origin: top center;
  will-change: transform;
}

.elara-score-svg-converge path,
.elara-score-svg-fan path {
  will-change: stroke-dashoffset;
}

@media (prefers-reduced-motion: reduce) {
  .elara-score [data-score-hero],
  .elara-score [data-score-kicker],
  .elara-score [data-score-input],
  .elara-score [data-score-converge-node],
  .elara-score [data-score-devices],
  .elara-score [data-score-devices-copy],
  .elara-score [data-score-ring],
  .elara-score [data-score-slider-track],
  .elara-score [data-score-fan-node],
  .elara-score [data-score-card],
  .elara-score [data-score-results-bg] {
    opacity: 1;
    visibility: visible;
  }

  .elara-score [data-score-spine-in],
  .elara-score [data-score-spine-out] {
    transform: none;
  }

  .elara-score [data-score-fan-stem] {
    transform: none;
  }

  .elara-score-svg-converge path,
  .elara-score-svg-fan path {
    stroke-dashoffset: 0;
  }
}

.elara-score-svg {
  display: block;
  width: 100%;
  pointer-events: none;
  overflow: visible;
}

.elara-score-flow-converge {
  margin-top: 2.4rem;
  margin-bottom: 0;
}

.elara-score-svg-converge {
  height: clamp(12rem, 16vw, 18rem);
  margin-bottom: -0.6rem;
}

.elara-score-svg-converge .is-blue {
  stroke: var(--score-blue);
}
.elara-score-svg-converge .is-teal {
  stroke: var(--score-teal);
}
.elara-score-svg-converge .is-purple {
  stroke: var(--score-purple);
}

.elara-score-devices {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(148rem, 100%);
  margin: 0 auto;
  padding: 0;
  min-height: 0;
  overflow: visible;
}

/* Copy sits above the slider; open center column keeps the spine unbroken */
.elara-score-devices-top {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem) minmax(0, 1fr);
  column-gap: clamp(1.2rem, 2vw, 2.4rem);
  align-items: start;
  width: 100%;
  margin: 0 0 0.8rem;
  pointer-events: none;
}

.elara-score-devices-copy {
  pointer-events: auto;
}

.elara-score-devices-copy h3 {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(2.8rem, 3.5vw, 4.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--score-ink);
}

.elara-score-devices-copy.is-left {
  grid-column: 1;
  justify-self: end;
  text-align: left;
  padding: 0 0.4rem 0 0;
}

.elara-score-devices-copy.is-right {
  grid-column: 3;
  justify-self: start;
  text-align: left;
  max-width: 34rem;
  padding: 0.35rem 0 0 0.4rem;
}

.elara-score-devices-lead,
.elara-score-devices-brands {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.2rem, 1.2vw, 1.45rem);
  line-height: 1.55;
  color: var(--score-muted);
}

.elara-score-devices-brands {
  margin-top: 0.2em;
  color: #6b7580;
}

.elara-score-devices-brands strong {
  color: var(--score-ink);
  font-weight: 700;
}

/* Stage: equal stubs immediately above + below the watch circle */
.elara-score-devices-stage {
  position: relative;
  z-index: 1;
  width: min(56rem, 100%);
  margin: 0 auto;
  padding: var(--score-gap) 0;
  box-sizing: content-box;
}

/* Split spine: in hits top of ring, out continues from bottom of ring */
.elara-score-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.elara-score-spine-seg {
  position: absolute;
  left: 0;
  width: 2px;
  background: var(--score-sky);
  border-radius: 2px;
  transform-origin: top center;
  transform: scaleY(0);
  will-change: transform;
}

.elara-score-spine-seg.is-in {
  top: 0;
  height: 40%;
}

.elara-score-spine-seg.is-out {
  top: 60%;
  height: 40%;
}

/* Wearable slider — ring + active watch share the same exact center */
.elara-score-slider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(26rem, 30vw, 32rem);
  overflow: hidden;
}

/* Soft fade so prev/next devices blend into the page (no hard cut) */
.elara-score-slider::before,
.elara-score-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(7rem, 18%, 12rem);
  pointer-events: none;
}

.elara-score-slider::before {
  left: 0;
  background: linear-gradient(
    90deg,
    #f7f9fb 0%,
    #f7f9fb 28%,
    rgba(247, 249, 251, 0) 100%
  );
}

.elara-score-slider::after {
  right: 0;
  background: linear-gradient(
    270deg,
    #f7f9fb 0%,
    #f7f9fb 28%,
    rgba(247, 249, 251, 0) 100%
  );
}

.elara-score-slider-track {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(5.6rem, 7vw, 8rem);
  will-change: transform;
  padding: 0;
  margin: 0;
}

.elara-score-watch-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(24rem, 48%);
  aspect-ratio: 1;
  /* Pure CSS center — avoid GSAP xPercent fighting this */
  transform: translate(-50%, -50%);
  transform-origin: center center;
  border-radius: 50%;
  border: 1.5px solid var(--score-sky);
  background: radial-gradient(
    circle at 50% 45%,
    #ffffff 0%,
    #ffffff 55%,
    #eef7fc 100%
  );
  box-shadow: 0 0 0 8px rgba(126, 200, 245, 0.04);
  pointer-events: none;
  will-change: opacity, transform;
}

.elara-score-slide {
  flex: 0 0 auto;
  width: clamp(14rem, 15vw, 17rem);
  display: grid;
  place-items: center;
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
}

.elara-score-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  background: transparent;
  filter: drop-shadow(0 1.2rem 2rem rgba(20, 40, 60, 0.18));
  user-select: none;
  pointer-events: none;
}

.elara-score-results {
  position: relative;
  margin-top: 0;
  padding: 0 0 6rem;
  min-height: 0;
}

.elara-score-results-bg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: min(72%, 56rem);
  background:
    linear-gradient(
      180deg,
      #f7f9fb 0%,
      rgba(247, 249, 251, 0.2) 18%,
      transparent 36%
    ),
    url("https://pub-054a1125fc0742889f3b9dd273d56586.r2.dev/SOLLUS-Landing-Page/elara/score-beach-wide.png")
      center bottom / cover no-repeat;
  pointer-events: none;
}

.elara-score-branch {
  position: relative;
  width: min(148rem, 100%);
  margin: 0 auto;
  padding-top: 0;
}

.elara-score-flow-fan {
  position: relative;
  z-index: 1;
  margin: 0;
  gap: 0;
}

/* Stem below hub only — top stub comes from stage --score-gap */
.elara-score-fan-stem {
  position: relative;
  z-index: 0;
  display: block;
  width: 2px;
  height: var(--score-gap);
  margin: -1.8rem auto 0;
  background: var(--score-sky);
  border-radius: 2px;
  transform-origin: top center;
  transform: scaleY(0);
  flex-shrink: 0;
  will-change: transform;
}

.elara-score-fan-hub {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(5.6rem, 7vw, 7.2rem);
  height: clamp(5.6rem, 7vw, 7.2rem);
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 42%,
    #ffffff 0%,
    #ffffff 46%,
    #e8f5fc 78%,
    #d7eefb 100%
  );
  border: 1.5px solid rgba(126, 200, 245, 0.65);
  box-shadow: 0 0 28px rgba(74, 167, 239, 0.4);
  flex-shrink: 0;
}

.elara-score-fan-hub-glow {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(126, 200, 245, 0.28) 0%,
    rgba(126, 200, 245, 0.06) 50%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.elara-score-fan-hub-logo {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 92%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  opacity: 1;
  filter: none;
  user-select: none;
  pointer-events: none;
}

/* Fan paths bend into card mids and tuck behind cards */
.elara-score-svg-fan {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: clamp(22rem, 28vw, 34rem);
  margin: -1px 0 -12rem;
  overflow: visible;
  pointer-events: none;
}

.elara-score-svg-fan path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.elara-score-svg-fan .is-gold {
  stroke: var(--score-gold);
}
.elara-score-svg-fan .is-slate {
  stroke: var(--score-slate);
}
.elara-score-svg-fan .is-sky {
  stroke: var(--score-sky);
}
.elara-score-svg-fan .is-green {
  stroke: var(--score-green);
}

.elara-score-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.6rem, 2.2vw, 2.8rem);
  width: 100%;
  margin: 0;
  padding-top: 0.2rem;
}

.elara-score-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border-radius: 1.8rem;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid transparent;
  box-shadow: 0 1.6rem 3.2rem rgba(20, 40, 60, 0.12);
  /* Raised from clamp(28rem, 34vw, 34rem): the copy block gained a tier label,
     a name and a blurb, and the image needs to keep its share of the card. */
  min-height: clamp(33rem, 40vw, 40rem);
}

.elara-score-card.is-gold {
  border-color: var(--score-gold);
}
.elara-score-card.is-slate {
  border-color: var(--score-slate);
}
.elara-score-card.is-sky {
  border-color: var(--score-sky);
}
.elara-score-card.is-green {
  border-color: var(--score-green);
}

.elara-score-card-copy {
  padding: 1.8rem 1.4rem 1rem;
  text-align: center;
  background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0));
}

.elara-score-card-pct {
  margin: 0 0 0.8rem;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(3.2rem, 3.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.elara-score-card-pct span {
  font-size: 0.55em;
}

/* Tier label, experience name and blurb sit between the percentage and the
   footnote. The percentage stays the loudest thing on the card; the footnote
   stays the quietest, as the tier spec asks. */
.elara-score-card-tier {
  margin: 0 0 0.45rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.82rem, 0.8vw, 0.94rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--score-muted);
}

.elara-score-card-name {
  margin: 0 0 0.5rem;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.5vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.elara-score-card-desc {
  margin: 0 auto 0.7rem;
  max-width: 20rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 1vw, 1.12rem);
  line-height: 1.45;
}

.elara-score-card-body {
  margin: 0 auto;
  max-width: 18rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.88rem, 0.88vw, 1rem);
  line-height: 1.4;
  color: var(--score-muted);
}

.elara-score-card-media {
  flex: 1;
  min-height: 14rem;
  margin-top: -1rem;
  position: relative;
}

.elara-score-card-media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 28%;
  background: linear-gradient(180deg, #fff, transparent);
  z-index: 1;
  pointer-events: none;
}

.elara-score-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hide story rail once score section is in view */
body.is-elara-score .elara-rail {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

@media screen and (max-width: 1100px) {
  .elara-score {
    --score-gap: 3.6rem;
  }

  .elara-score-devices {
    min-height: 0;
    padding-top: 0;
    gap: 1.6rem;
  }

  .elara-score-devices-top {
    position: relative;
    top: auto;
    transform: none;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 1.6rem;
    margin-bottom: 0;
  }

  .elara-score-devices-copy.is-left,
  .elara-score-devices-copy.is-right {
    grid-column: 1;
    justify-self: center;
    text-align: center;
    max-width: 28rem;
    padding: 0;
  }

  .elara-score-devices-copy h3 {
    max-width: 16ch;
    margin: 0 auto;
  }

  .elara-score-devices-lead,
  .elara-score-devices-brands {
    margin-left: auto;
    margin-right: auto;
  }

  .elara-score-devices-stage {
    width: min(40rem, 100%);
  }

  .elara-score-slider {
    height: 30rem;
  }

  .elara-score-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
  }

  .elara-score-card {
    min-height: 32rem;
  }
}

@media screen and (max-width: 767px) {
  .elara-score-inner {
    padding: 4.8rem 1.6rem 0;
    overflow-x: clip;
  }

  .elara-score-title {
    font-size: clamp(2.8rem, 8.5vw, 3.6rem);
  }

  .elara-score-sub {
    font-size: clamp(1.1rem, 3.8vw, 1.3rem);
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .elara-score-hero {
    margin-bottom: 2.8rem;
  }

  .elara-score-kicker {
    margin: 0 0 1.6rem;
    text-align: left;
    font-size: clamp(1.7rem, 5.2vw, 2.2rem);
  }

  .elara-score-madeof {
    max-width: 40rem;
    margin: 0 auto;
  }

  .elara-score-inputs {
    grid-template-columns: 1fr;
    gap: 2.8rem;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 2.4rem 1.6rem 2.8rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 1.2rem 3.2rem rgba(40, 70, 100, 0.06);
  }

  .elara-score-input-pct {
    margin-bottom: 1rem;
    font-size: clamp(2.8rem, 9vw, 3.6rem);
  }

  .elara-score-orb {
    width: clamp(7.2rem, 22vw, 9rem);
    height: clamp(7.2rem, 22vw, 9rem);
    margin-bottom: 1.2rem;
  }

  .elara-score-input-title {
    font-size: clamp(1.6rem, 5vw, 2rem);
  }

  .elara-score-input-body {
    font-size: clamp(1.05rem, 3.5vw, 1.2rem);
    max-width: 28rem;
  }

  .elara-score-svg-converge {
    display: none;
  }

  .elara-score-flow-converge {
    margin-top: 0.4rem;
  }

  .elara-score-flow-converge .elara-score-flow-node {
    margin-top: 1.2rem;
  }

  .elara-score-madeof::after {
    content: "";
    display: block;
    width: 2px;
    height: 3.6rem;
    margin: 0.4rem auto 0;
    background: linear-gradient(
      180deg,
      var(--score-blue),
      var(--score-teal),
      var(--score-purple)
    );
    border-radius: 2px;
  }

  .elara-score {
    --score-gap: 2.4rem;
  }

  .elara-score-devices {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 5.6rem 0 3.2rem;
    box-sizing: border-box;
  }

  .elara-score-devices-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    row-gap: 0.7rem;
    margin-bottom: 0.8rem;
    width: 100%;
    flex: 0 0 auto;
  }

  .elara-score-devices-copy.is-left,
  .elara-score-devices-copy.is-right {
    grid-column: auto;
    justify-self: center;
    text-align: center;
    max-width: 34rem;
    padding: 0;
  }

  .elara-score-devices-copy h3 {
    max-width: 14ch;
    margin: 0 auto;
    font-size: clamp(2.4rem, 7.5vw, 3.2rem);
  }

  .elara-score-devices-lead,
  .elara-score-devices-brands {
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.05rem, 3.6vw, 1.2rem);
  }

  .elara-score-devices-brands {
    max-width: 32rem;
    line-height: 1.45;
  }

  .elara-score-devices-stage {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 1.2rem 0 2rem;
  }

  .elara-score-slider {
    height: min(42vh, 28rem);
    width: 100%;
    overflow: hidden;
  }

  .elara-score-slider::before,
  .elara-score-slider::after {
    width: 10%;
  }

  .elara-score-slider-track {
    gap: 2rem;
  }

  .elara-score-watch-ring {
    /* Match active device footprint so ring + watch share one center */
    width: min(22rem, 64%);
    transform: translate(-50%, -50%);
  }

  .elara-score-slide {
    width: clamp(12.5rem, 40vw, 15.5rem);
  }

  .elara-score-spine {
    top: 0;
    bottom: 0;
  }

  .elara-score-results {
    margin-top: 0;
    min-height: 0;
    padding-top: 1.2rem;
    padding-bottom: 4.8rem;
  }

  .elara-score-svg-fan {
    display: none;
  }

  .elara-score-flow-fan {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .elara-score-fan-hub {
    width: 7.2rem;
    height: 7.2rem;
    margin-bottom: 0;
  }

  .elara-score-fan-hub-logo {
    width: 94%;
    height: 94%;
  }

  /* Space via continuous line, not empty gap */
  .elara-score-fan-stem {
    display: block;
    width: 2px;
    height: 5.6rem;
    margin: -0.4rem auto 0;
    background: var(--score-sky);
    transform: scaleY(1);
    transform-origin: top center;
  }

  .elara-score-cards {
    grid-template-columns: 1fr;
    /* max-width: 34rem; */
    gap: 1.6rem;
    margin: 0 auto;
    padding-top: 0;
  }

  .elara-score-card {
    min-height: 0;
    height: auto;
    /* Taller than it was: the card carries a tier label, a name and a blurb
       now, not a single line under the percentage. */
    aspect-ratio: 4 / 4.4;
  }

  .elara-score-card-pct {
    margin-bottom: 0.45rem;
    font-size: clamp(2.6rem, 8vw, 3.2rem);
  }

  .elara-score-card-tier {
    font-size: clamp(0.78rem, 2.6vw, 0.88rem);
    letter-spacing: 0.14em;
  }

  .elara-score-card-name {
    font-size: clamp(1.35rem, 4.6vw, 1.6rem);
  }

  .elara-score-card-desc {
    max-width: 24rem;
    font-size: clamp(1.02rem, 3.3vw, 1.16rem);
  }

  .elara-score-card-body {
    max-width: 22rem;
    font-size: clamp(0.92rem, 3vw, 1.04rem);
    line-height: 1.4;
  }

  .elara-score-card-copy {
    flex: 0 0 auto;
    padding: 1.4rem 1.4rem 0.6rem;
  }

  .elara-score-card-media {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 12rem;
    max-height: none;
    margin-top: auto;
    overflow: hidden;
    display: block;
  }

  .elara-score-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 12rem;
    object-fit: cover;
    object-position: center bottom;
  }

  .elara-score-results-bg {
    height: 70%;
  }
}

/* Scroll reveal — last Elara sections (JS sets .is-revealed) */
.elara-collect [data-collect-reveal],
.elara-journey [data-journey-reveal] {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 2.8rem, 0);
  will-change: opacity, transform;
}

.elara-collect [data-collect-reveal].is-revealed,
.elara-journey [data-journey-reveal].is-revealed {
  opacity: 1;
  visibility: visible;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .elara-collect [data-collect-reveal],
  .elara-journey [data-journey-reveal] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ─── How collection works (horizontal fill-trace) ─── */
.elara-collect {
  --collect-ink: #1c1c1c;
  --collect-muted: #8a8a8a;
  --collect-line: #d6d6d6;
  --collect-fill: #1c1c1c;
  --collect-node: #f3f1ec;
  --collect-accent: #8a6d3b;
  position: relative;
  z-index: 3;
  background: #f7f8f9;
  color: var(--collect-ink);
  /* Extra runway for 4-card horizontal scrub */
  height: 420vh;
}

.elara-collect-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.8rem, 3vh, 3.2rem);
  padding: 5rem clamp(1.6rem, 3vw, 3.2rem) 3.2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.elara-collect-hero {
  text-align: center;
  max-width: 64rem;
  margin: 0 auto;
  flex-shrink: 0;
}

.elara-collect-title {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(3.2rem, 4.5vw, 5.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--collect-ink);
}

.elara-collect-sub {
  margin: 1.4rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.25rem, 1.35vw, 1.55rem);
  line-height: 1.55;
  color: var(--collect-muted);
}

.elara-collect-trace {
  position: relative;
  width: min(148rem, 100%);
  margin: 0 auto;
  flex-shrink: 0;
  padding-top: clamp(9rem, 12vh, 12.5rem);
  padding-bottom: 0.4rem;
}

.elara-collect-labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(8.4rem, 11vh, 11.5rem);
  pointer-events: none;
}

.elara-collect-label {
  position: absolute;
  top: 0;
  left: 0;
  width: min(32rem, 36%);
  padding-left: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  will-change: opacity, transform;
}

.elara-collect-label-tick {
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 0.4rem;
  width: 1.5px;
  background: var(--collect-fill);
}

.elara-collect-label-day {
  margin: 0 0 0.35rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--collect-ink);
}

.elara-collect-label-title {
  margin: 0 0 0.55rem;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  line-height: 1.15;
  color: var(--collect-ink);
}

/* Milestone label -- only the two steps that need telling apart carry one, so
   Day 4 (collection and testing) does not read as the same event as Day 7
   (results). Sits between the title and the body, quieter than both. */
.elara-collect-label-note {
  margin: 0 0 0.45rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.92rem, 0.92vw, 1.02rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--collect-accent);
}

.elara-collect-label-body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.1rem, 1.15vw, 1.3rem);
  line-height: 1.5;
  color: var(--collect-muted);
}

.elara-collect-rail {
  position: relative;
  height: 2rem;
  width: 100%;
  margin: 1.2rem 0 1.6rem;
}

.elara-collect-rail-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--collect-line);
  border-radius: 2px;
}

.elara-collect-rail-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  width: 0%;
  background: var(--collect-fill);
  border-radius: 2px;
  transform-origin: left center;
  will-change: width;
}

.elara-collect-nodes {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  transform: none;
  pointer-events: none;
}

.elara-collect-node {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--collect-line);
  background: var(--collect-node);
  box-sizing: border-box;
  flex-shrink: 0;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.elara-collect-node.is-active,
.elara-collect-node.is-done {
  background: var(--collect-fill);
  border-color: var(--collect-fill);
}

.elara-collect-viewport {
  position: relative;
  width: min(148rem, 100%);
  margin: 0 auto;
  overflow: hidden;
  flex: 0 0 auto;
}

.elara-collect-track {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  width: max-content;
  will-change: transform;
}

.elara-collect-card {
  position: relative;
  flex: 0 0 auto;
  /* Exact width applied in JS so 3 cards fill the row */
  width: 32%;
  height: clamp(24rem, 34vh, 36rem);
  border-radius: 2.2rem;
  overflow: hidden;
  background: #eceae6;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.elara-collect-card.is-active {
  border-color: var(--collect-fill);
  box-shadow: 0 0 0 1px var(--collect-fill);
  z-index: 2;
}

.elara-collect-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.elara-collect-card.is-watch {
  background: #f2f0ec;
}

.elara-collect-card.is-watch img {
  object-fit: contain;
  padding: 6% 8%;
  box-sizing: border-box;
}

.elara-collect-card.is-phone img {
  object-fit: contain;
  object-position: center top;
  padding: 4% 6% 0;
  box-sizing: border-box;
  background: linear-gradient(180deg, #eef2f5, #e4e9ee);
}

.elara-collect-card.is-kit img {
  object-fit: contain;
  padding: 4% 5%;
  box-sizing: border-box;
  background: #f4f2ee;
}

.elara-collect-card.is-photo img {
  object-fit: cover;
  object-position: center;
}

.elara-collect-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 248, 249, 0.55);
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.elara-collect-card.is-active::after {
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .elara-collect {
    height: 340vh;
  }

  .elara-collect-pin {
    padding: 2.6rem 1.6rem 1.4rem;
    gap: 0.7rem;
    justify-content: flex-start;
    overflow: hidden !important;
    box-sizing: border-box;
    transform: none;
    will-change: auto;
  }

  .elara-collect-title {
    font-size: clamp(2.4rem, 7vw, 3rem);
  }

  .elara-collect-sub {
    font-size: clamp(1.05rem, 3.4vw, 1.2rem);
    margin-top: 0.4rem;
  }

  .elara-collect-trace {
    padding-top: 10.2rem;
    padding-bottom: 0;
  }

  .elara-collect-labels {
    height: 9.2rem;
  }

  .elara-collect-rail {
    height: 2.4rem;
    margin: 1.8rem 1.6rem 2rem;
  }

  .elara-collect-label {
    width: min(30rem, 96%);
    transition: none !important;
  }

  .elara-collect-label-title {
    font-size: clamp(1.5rem, 4.5vw, 1.8rem);
    margin-bottom: 0.3rem;
  }

  .elara-collect-label-body {
    font-size: clamp(1rem, 3.4vw, 1.15rem);
    line-height: 1.35;
  }

  .elara-collect-viewport {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 48vh;
    overflow: hidden;
  }

  .elara-collect-track {
    height: 100%;
    align-items: stretch;
  }

  .elara-collect-card {
    width: 86vw;
    height: auto;
    min-height: clamp(28rem, 44vh, 40rem);
    max-height: 100%;
    aspect-ratio: 3 / 4.35;
    border-radius: 1.6rem;
    transition: none !important;
  }

  .elara-collect-card img {
    object-fit: contain;
    object-position: center;
  }

  .elara-collect-card.is-watch img,
  .elara-collect-card.is-phone img,
  .elara-collect-card.is-kit img,
  .elara-collect-card.is-photo img {
    padding: 4%;
    object-fit: contain;
  }

  .elara-collect-card::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(247, 248, 249, 0.4);
    transition: opacity 0.2s ease;
  }
}

/* ─── Workforce journey (scroll steps + sliding blue strip) ─── */
.elara-journey {
  --journey-ink: #1c1c1c;
  --journey-muted: #8a8a8a;
  --journey-line: #ececec;
  --journey-blue-top: #1a3a6e;
  --journey-blue-mid: #1e4f9c;
  --journey-blue-bot: #2563b8;
  --journey-num: #6ba3e0;
  position: relative;
  z-index: 8;
  background: #fff;
  color: var(--journey-ink);
  /* 4 equal step holds + free runway after last */
  height: 460vh;
}

.elara-journey-pin {
  position: sticky;
  top: 0;
  z-index: 8;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 8vh, 8rem) clamp(2rem, 4vw, 5rem);
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
}

.elara-journey-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(3rem, 5vw, 7rem);
  align-items: center;
  width: min(148rem, 100%);
  margin: 0 auto;
}

.elara-journey-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(2.8rem, 4vh, 4rem);
  min-width: 0;
}

.elara-journey-hero {
  max-width: 42rem;
}

.elara-journey-title {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(3.2rem, 4.2vw, 5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--journey-ink);
}

.elara-journey-sub {
  margin: 1.4rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.25rem, 1.25vw, 1.45rem);
  line-height: 1.55;
  color: var(--journey-muted);
  max-width: 38rem;
}

.elara-journey-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 44rem;
}

.elara-journey-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 0;
  border-radius: 1.8rem;
  background: linear-gradient(
    165deg,
    var(--journey-blue-top) 0%,
    var(--journey-blue-mid) 48%,
    var(--journey-blue-bot) 100%
  );
  box-shadow:
    0 1.6rem 3.6rem rgba(20, 50, 100, 0.22),
    0 0.4rem 1.2rem rgba(20, 50, 100, 0.12);
  pointer-events: none;
  will-change: transform, height;
}

.elara-journey-step {
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.6rem;
  align-items: start;
  padding: 2rem 2.2rem;
  border-radius: 1.8rem;
  border: 1px solid var(--journey-line);
  background: #fff;
  box-shadow: 0 0.8rem 2.4rem rgba(20, 30, 50, 0.04);
  box-sizing: border-box;
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.elara-journey-step.is-active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.elara-journey-step-num {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  border: 1.5px solid rgba(107, 163, 224, 0.55);
  background: #f3f8fc;
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--journey-num);
  flex-shrink: 0;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

.elara-journey-step.is-active .elara-journey-step-num {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  color: #3b82c4;
}

.elara-journey-step-title {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  line-height: 1.2;
  color: var(--journey-ink);
  transition: color 0.35s ease;
}

.elara-journey-step-body {
  margin: 0.55rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.2rem, 1.15vw, 1.35rem);
  line-height: 1.5;
  color: var(--journey-muted);
  transition: color 0.35s ease;
}

.elara-journey-step.is-active .elara-journey-step-title,
.elara-journey-step.is-active .elara-journey-step-body {
  color: #fff;
}

.elara-journey-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(72vh, 62rem);
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.elara-journey-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

.elara-journey-figure.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.elara-journey-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  user-select: none;
  pointer-events: none;
}

@media screen and (max-width: 1100px) {
  .elara-journey {
    height: 440vh;
  }

  .elara-journey-inner {
    grid-template-columns: 1fr;
    row-gap: 2.4rem;
    align-items: stretch;
  }

  .elara-journey-media {
    order: -1;
    width: 100%;
    max-height: 36rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .elara-journey-steps {
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  .elara-journey {
    height: 380vh;
  }

  .elara-journey-pin {
    padding: 2.4rem 1.6rem 1.6rem;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden !important;
    box-sizing: border-box;
    transform: none;
    will-change: auto;
  }

  .elara-journey-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    row-gap: 1rem;
    gap: 1rem;
  }

  .elara-journey-copy {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 1.1rem;
    overflow: visible;
  }

  .elara-journey-hero {
    flex-shrink: 0;
  }

  .elara-journey-title {
    font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1.15;
  }

  .elara-journey-sub {
    display: none;
  }

  .elara-journey-steps {
    gap: 0.8rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: stretch;
  }

  .elara-journey-step {
    flex: 1 1 0;
    padding: 1.5rem 1.6rem;
    border-radius: 1.5rem;
    column-gap: 1.1rem;
    min-height: 6.2rem;
    align-items: center;
    transition: none !important;
  }

  .elara-journey-step.is-active {
    /* flex: 1.55 1 0; */
    padding: 1.65rem 1.7rem 1.8rem;
    align-items: start;
  }

  .elara-journey-step-num {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.05rem;
    transition: none !important;
  }

  .elara-journey-step-title {
    font-size: clamp(1.45rem, 4vw, 1.75rem);
    transition: none !important;
  }

  .elara-journey-step-body {
    font-size: 1.14rem;
    line-height: 1.5;
    margin-top: 0.5rem;
    display: none;
    transition: none !important;
  }

  .elara-journey-step.is-active .elara-journey-step-body {
    display: block;
  }

  .elara-journey-media {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    height: 34vh;
    min-height: 20rem;
    max-height: 32rem;
    aspect-ratio: auto;
    border-radius: 1.6rem;
    overflow: hidden;
    background: #f4f6f8;
  }

  .elara-journey-figure {
    transition: none;
    inset: 1rem;
  }

  .elara-journey-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

/* ─── 12 key markers (orbit) ─── */
.elara-markers {
  position: relative;
  z-index: 4;
  background: #f4f8fb;
  color: #1c2430;
}

.elara-markers-pin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 6rem 2.4rem;
  box-sizing: border-box;
}

.elara-markers-stage {
  position: relative;
  width: min(92rem, 100%);
  aspect-ratio: 1;
  max-height: min(92vh, 92rem);
  margin: 0 auto;
}

.elara-markers-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(126, 200, 245, 0.18) 0%,
    rgba(126, 200, 245, 0.06) 42%,
    transparent 72%
  );
  filter: blur(2px);
  pointer-events: none;
}

/* Same particle orb as hero header — soft / low opacity behind copy */
.elara-markers-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(42rem, 48%);
  transform: translate(-50%, -50%);
  opacity: 0.28;
  pointer-events: none;
}

.elara-markers-particles .elara-orb {
  width: 100%;
  aspect-ratio: 1;
}

.elara-markers-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(34rem, 42%);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.elara-markers-title {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(3.2rem, 4vw, 4.8rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #1c2430;
}

.elara-markers-body {
  margin: 1.4rem auto 0;
  max-width: 28rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.05rem, 1.05vw, 1.2rem);
  line-height: 1.55;
  color: #6b7785;
}

.elara-markers-orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.elara-markers-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(120, 140, 160, 0.45);
  pointer-events: none;
}

.elara-markers-ring {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.elara-markers-card {
  --i: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(8.8rem, 10.5vw, 11.6rem);
  aspect-ratio: 364 / 520;
  margin: 0;
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.elara-markers-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 1.6rem;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 1rem 2.4rem rgba(30, 50, 70, 0.12);
  transform-origin: center center;
}

.elara-markers-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  user-select: none;
  pointer-events: none;
}

@media screen and (max-width: 991px) {
  .elara-markers-stage {
    width: min(64rem, 100%);
    max-height: min(88vh, 64rem);
  }

  .elara-markers-center {
    width: min(28rem, 48%);
  }

  .elara-markers-card {
    width: clamp(7.2rem, 12vw, 9rem);
  }
}

@media screen and (max-width: 767px) {
  .elara-markers-pin {
    padding: 4.8rem 1.6rem 5.6rem;
    min-height: 0;
  }

  .elara-markers-stage {
    width: 100%;
    max-height: none;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
  }

  .elara-markers-glow,
  .elara-markers-path,
  .elara-markers-particles {
    display: none;
  }

  .elara-markers-center {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 34rem;
    transform: none;
    order: -1;
  }

  .elara-markers-title {
    font-size: clamp(2.6rem, 8vw, 3.4rem);
  }

  .elara-markers-body {
    font-size: clamp(1.1rem, 3.8vw, 1.25rem);
    margin-top: 1rem;
    max-width: 28rem;
  }

  .elara-markers-orbit {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .elara-markers-ring {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.8rem;
    width: 100%;
    transform: none !important;
    will-change: auto;
  }

  .elara-markers-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    max-width: 11rem;
    margin: 0 auto;
    opacity: 1;
    visibility: visible;
    transform: none !important;
    will-change: auto;
  }

  .elara-markers-card-inner {
    transform: none !important;
  }
}

/* ─── Usual Way vs Sollus (after markers) ─── */
.elara-compare {
  --compare-ink: #1c2430;
  --compare-muted: #8a94a0;
  --compare-blue: #2f6fb5;
  --compare-panel: #d7ebf8;
  position: relative;
  z-index: 5;
  background: #f7f9fb;
  color: var(--compare-ink);
  height: 460vh;
  overflow-x: clip;
  max-width: 100%;
}

.elara-compare-pin {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3.6rem, 7vh, 6rem);
  padding: clamp(3.2rem, 4.5vh, 5rem) clamp(2rem, 3.5vw, 4rem)
    clamp(6.5rem, 8vh, 8.5rem);
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: visible;
  background: #f7f9fb;
}

.elara-compare-hero {
  width: min(78rem, 100%);
  margin: 0 auto;
  text-align: center;
  flex: 0 0 auto;
}

.elara-compare-title {
  margin: 0;
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(3.2rem, 4vw, 4.8rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--compare-ink);
}

.elara-compare-sub {
  margin: 1.4rem auto 0;
  max-width: 58rem;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.25rem, 1.25vw, 1.45rem);
  line-height: 1.55;
  color: var(--compare-muted);
}

.elara-compare-stage {
  position: relative;
  width: min(112rem, 100%);
  flex: 0 1 auto;
  min-height: 0;
  height: min(68vh, 54rem);
  max-height: calc(100dvh - 16rem);
  margin: 0 auto;
  overflow-x: clip;
  overflow-y: visible;
}

.elara-compare-usual,
.elara-compare-sollus {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(76rem, 84%);
  will-change: transform, opacity;
  overflow: visible;
}

.elara-compare-usual {
  left: 50%;
  transform: translateX(-50%);
}

.elara-compare-sollus {
  left: 50%;
  right: auto;
  opacity: 0;
  transform: translateX(-50%) translateX(42vw);
  pointer-events: none;
}

.elara-compare-col-title {
  margin: 0 0 clamp(2.4rem, 3.8vh, 3.6rem);
  font-family: "Playfair Display", "Marcellus", serif;
  font-weight: 500;
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.1;
}

.elara-compare-col-title.is-usual {
  color: #16345c;
  opacity: 0;
  visibility: hidden;
}

.elara-compare-col-title.is-sollus {
  color: #16345c;
}

.elara-compare-usual-panel,
.elara-compare-sollus-panel {
  position: relative;
  height: 100%;
  min-height: 100%;
  border-radius: 2.6rem;
  padding: clamp(2.2rem, 3vh, 3.2rem) clamp(2.4rem, 3.2vw, 3.6rem)
    clamp(1.8rem, 2.4vh, 2.6rem);
  box-shadow:
    0 1.8rem 4rem rgba(40, 70, 100, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  overflow: visible;
  box-sizing: border-box;
}

.elara-compare-usual-panel {
  background: rgba(255, 255, 255, 0.55);
}

.elara-compare-sollus-panel {
  background: radial-gradient(
    120% 110% at 42% 38%,
    #f7fbfe 0%,
    #e8f3fb 48%,
    #d8ebf6 100%
  );
}

.elara-compare-usual-cards,
.elara-compare-sollus-cards {
  display: grid;
  gap: clamp(1.6rem, 2.6vh, 2.2rem);
  width: min(46rem, 64%);
  align-content: start;
  position: relative;
  z-index: 2;
}

.elara-compare-usual-cards {
  display: block;
  height: calc(100% - 5.2rem);
  width: min(52rem, 78%);
  margin: 0 auto;
}

.elara-compare-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 4.6rem;
  padding: 1.15rem 2.4rem;
  justify-content: flex-start;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1.1rem, 1.15vw, 1.35rem);
  font-weight: 500;
  color: #1c2430;
  line-height: 1.3;
  white-space: normal;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 2.4rem rgba(255, 255, 255, 0.95),
    0 0.8rem 2rem rgba(70, 110, 150, 0.12);
}

.elara-compare-chip.is-usual {
  position: absolute;
  left: 0;
  min-width: min(28rem, 88%);
  justify-content: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  background: #f4f6f8;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0.8rem 2rem rgba(70, 110, 150, 0.1);
}

.elara-compare-chip.is-usual:nth-child(1) {
  top: 2%;
  left: 18%;
}
.elara-compare-chip.is-usual:nth-child(2) {
  top: 27%;
  left: 0%;
}
.elara-compare-chip.is-usual:nth-child(3) {
  top: 52%;
  left: 22%;
}
.elara-compare-chip.is-usual:nth-child(4) {
  top: 77%;
  left: 6%;
}

.elara-compare-chip.is-sollus {
  background: rgba(255, 255, 255, 0.88);
}

.elara-compare-bottle {
  position: absolute;
  right: 0.4rem;
  bottom: -5.2rem;
  width: min(28rem, 42%);
  height: auto;
  max-height: 96%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 1.4rem 2.4rem rgba(20, 40, 60, 0.16));
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

@media screen and (max-width: 991px) {
  .elara-compare {
    height: auto;
  }
  .elara-chapters {
    margin-top: 10%;
  }
  .elara-compare-pin {
    position: relative;
    height: auto;
    gap: 2.4rem;
    padding: 5.6rem 2.4rem 5rem;
    overflow: visible;
  }

  .elara-compare-title {
    font-size: clamp(2.8rem, 4.5vw, 3.8rem);
  }

  .elara-compare-sub {
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    max-width: 48rem;
  }

  .elara-compare-stage {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    overflow: visible;
  }

  .elara-compare-usual,
  .elara-compare-sollus {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .elara-compare-sollus {
    margin-top: 0;
  }

  .elara-compare-usual-panel,
  .elara-compare-sollus-panel {
    height: auto;
    min-height: 0;
    padding: 2.4rem 2rem 2.8rem;
  }

  .elara-compare-col-title.is-usual {
    opacity: 1;
    visibility: visible;
  }

  .elara-compare-usual-cards,
  .elara-compare-sollus-cards {
    width: min(42rem, 100%);
  }

  .elara-compare-usual-cards {
    height: 26rem;
  }

  .elara-compare-bottle {
    width: min(18rem, 40%);
    right: 0.4rem;
    bottom: -3.6rem;
  }
}

@media screen and (max-width: 767px) {
  .elara-compare-pin {
    padding: 4.8rem 1.6rem 5.6rem;
    gap: 2rem;
  }

  .elara-compare-title {
    font-size: clamp(2.6rem, 8vw, 3.4rem);
  }

  .elara-compare-sub {
    margin-top: 1rem;
    font-size: clamp(1.1rem, 3.8vw, 1.25rem);
  }

  .elara-compare-stage {
    gap: 2rem;
  }

  .elara-compare-usual-panel,
  .elara-compare-sollus-panel {
    border-radius: 2rem;
    padding: 2rem 1.4rem 2.4rem;
  }

  .elara-compare-col-title {
    margin-bottom: 1.8rem;
    font-size: clamp(1.8rem, 5.5vw, 2.2rem);
  }

  .elara-compare-usual-cards {
    height: auto;
    display: grid;
    gap: 1rem;
    width: 100%;
    margin: 0;
  }

  .elara-compare-chip {
    min-height: 4rem;
    padding: 1rem 1.6rem;
    font-size: clamp(1.05rem, 3.6vw, 1.2rem);
  }

  .elara-compare-chip.is-usual {
    position: relative;
    left: auto !important;
    top: auto !important;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    opacity: 1;
    visibility: visible;
    white-space: normal;
  }

  .elara-compare-sollus-cards {
    width: 100%;
    gap: 1rem;
  }

  .elara-compare-bottle {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(16rem, 58%);
    max-height: none;
    margin: 1.8rem auto 0;
  }
}