.overlap-cta {

  z-index: 3;

  margin-top: -50px;
  margin-bottom: -50px;

  max-height: 100px;

  position: relative;

  padding: 0;
}

.overlap-cta .container {

  background: var(--color-bg-glass);
}

/* ============================================
   DEMO CTA OVERLAP SECTION
   ============================================ */
.container.overlap-top {
  position: relative;
  z-index: 10;
  background: transparent !important;
  border: none !important;
  margin: -350px auto 150px auto;
}

.demo-cta-card .btn--secondary {

  background: transparent;
  margin: 0;

}

.demo-cta-card {
  /* background: var(--color-surface); */
  min-height: 250px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xl);

  background-color: var(--color-text);
  background-image:
    radial-gradient(circle at top left, var(--color-surface-elevated) -100%, transparent 50%),
    radial-gradient(circle at bottom right, var(--color-surface-elevated) -100%, transparent 50%);
  background-blend-mode: luminosity;
  /* background-image: url("../images/spark-background.webp"); */


  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);

}

.demo-cta-card__image {
  flex-shrink: 0;

  overflow: hidden;

  min-width: 320px;
  height: 100%;
  min-height: 205px;
  background: url("../images/demo.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.demo-cta-card__content {
  flex: 0 0 auto;
}

.demo-cta-card__content h3 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-bg);
}

.demo-cta-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-shrink: 0;
}

.country-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.country-selector label {
  font-size: var(--text-xs);
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.country-select {
  appearance: none;
  background: rgba(248, 248, 248, 1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-md);
  color: rgba(0, 0, 0, 0.9);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  min-width: 220px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: all var(--transition-base);
}

.country-select:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 1);
}

.country-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 111, 0, 0.1);
}

.btn--large {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--text-lg);
  font-weight: 700;
}

.demo-cta-card .btn--primary {

  margin: 0;

}

/* Add padding to neighboring sections */



canvas.games-gallery-webgl {

  top: calc(50% + (-1 * var(--parallax-offset))) !important;

}

section#product-features {
  padding-top: 220px !important;
}

/* Responsive adjustments */


/* New styles for SVG icon inheritance */
.icon-play-svg {
  display: inline-block;
  width: 1.9em;
  height: 0.9em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url('../images/play.svg') no-repeat center / contain;
  mask: url('../images/play.svg') no-repeat center / contain;
  /* optical alignment */
  font-size: initial;
}

#fixed-headline {
  color: var(--color-text) !important;
}


.dynamic-subheadline,
#fixed-headline {
  display: inline-block;
}

.dynamic-subheadline {
  color: var(--color-primary);
}

.headline-word {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
  margin-right: 0.25em;
  /* Adjust spacing as needed, since we split by space */
}

.headline-word:last-child {
  margin-right: 0;
}

@keyframes subheadlineFlow {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    filter: blur(3px);
  }

  15% {
    opacity: 1;
    transform: translateY(0px) scale(1);
    filter: blur(0);
  }

  85% {
    opacity: 1;
    transform: translateY(-4px) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px) scale(1.04);
    filter: blur(3px);
  }
}

.animate-flow .headline-word {
  animation: subheadlineFlow 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-long .headline-word {
  animation: subheadlineFlow 5.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ============================================
   LOGO MARQUEE
   ============================================ */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 50px 0;
  /* Added padding to prevent tooltip clipping */

  /* Gradient mask for fade on left and right edges */
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%);
}

.logo-marquee--bg {
  height: 100px;
  background-image: url('../images/website-logos.webp');
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: auto 100px;
  animation: marquee-bg-scroll 30s linear infinite;
  padding: 0;
  /* Override default padding */
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  /* Spacing between logos */
  width: max-content;
  /* We will have 2 sets of logos. We animate from 0 to -50% to create seamless loop 
     provided the total width is handled correctly. 
     Actually, simpler is to animate translateX from 0 to -100% of ONE set width?
     If we duplicate the content, we animate -50%.
  */
  animation: marquee-track-scroll var(--marquee-duration, 40s) linear infinite;
  /* Duration scales with logo count via --marquee-duration on .logo-marquee */
}

.logo-marquee img {
  height: 50px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: .8;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.logo-marquee img:hover {
  opacity: 1;
}

/* Homepage "Proven. Trusted." brand marquee — the portfolio logos have a wide
   mix of aspect ratios, so allow a larger width cap to keep them optically even. */
.logo-marquee.logo-marquee--brands img {
  max-width: 230px;
}

/* Pause animations on hover */
.logo-marquee:hover .logo-marquee--bg,
.logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}

/* Opt-out for marquees without links: no pointer cursor, no pause on hover */
.logo-marquee--no-pause img {
  cursor: default;
}

.logo-marquee--no-pause:hover .logo-marquee--bg,
.logo-marquee--no-pause:hover .logo-marquee__track {
  animation-play-state: running;
}

/* Marquee Tooltips & Links */

.theme-light .marquee-link img {
  filter: invert(1);
}

.marquee-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.marquee-tooltip {
  display: flex;
  align-items: center;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 20;
  box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
}

.marquee-link:hover .marquee-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@keyframes marquee-bg-scroll {
  0% {
    background-position: 0 center;
  }

  100% {
    background-position: -1000px center;
    /* Negative for left scroll, or positive? Usually negative. */
  }
}

@keyframes marquee-track-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Responsive adjustments */



/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--color-surface-elevated);
  width: 90%;
  max-width: 600px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  padding: var(--space-2xl);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal ul {
  list-style-type: none;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.modal-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

.modal-body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
}

/* Modal Image Styles */
.modal {
  margin-top: 50px;
  padding-top: 50px;
  overflow: visible !important;
  position: relative;
}

.modal-image-container {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.modal-image-container img {
  width: 60%;
  height: auto;
  display: block;
}

/* Card Icon Styles */
.card__icon {
  display: block;
  object-fit: contain;
}

/* Gamification Cards (Product Page) */
.gamification-card {
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radius-xl);
  min-height: auto !important;
  /* Override card styling */
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  border: none;
  /* Ensure rounded corners */
}

.gamification-card:hover {
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.gamification-card .card__content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-md);
  text-align: left;
}

.gamification-card .gamification-card__icon {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  margin-bottom: 0;
  object-fit: contain;
  padding: 24px;
  box-sizing: border-box;
}

.gamification-card .card__text {
  flex-grow: 1;
}

.gamification-card .card__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.gamification-card .card__description {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gamification-card {
  margin-bottom: 0;
  /* Let grid gap handle spacing */
  height: 100%;
  /* Fill grid cell */
}

.gamification-card {
  padding: 0 !important;
  /* Override .card padding */
}

/* Utility to hide elements on mobile */

/* Lumio Buttons */
.btn--lumio {
  position: relative;
  /* Dark background inside, Gradient border */
  /* Dark background inside, Gradient border */
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(90deg, #FF00D4 0%, #00E0FF 100%) border-box;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  color: #fff;
  font-weight: 600;
  transition: all var(--transition-base);
  padding-left: 3rem;
  /* Space for icon */
}

/* Common Icon Style via ::before */
.btn--lumio::before,
.btn--lumio-outline::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  height: 1.2em;
  background-image: url('../images/lumio-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(-8px 0 16px rgba(255, 0, 212, 0.4)) drop-shadow(-16px 0 32px rgba(255, 0, 212, 0.2)) drop-shadow(8px 0 16px rgba(0, 224, 255, 0.4)) drop-shadow(16px 0 32px rgba(0, 224, 255, 0.2));
  pointer-events: none;
}

.btn--lumio:hover {
  /* Fill with gradient on hover */
  background: linear-gradient(90deg, #FF00D4 0%, #00E0FF 100%) padding-box,
    linear-gradient(90deg, #FF00D4 0%, #00E0FF 100%) border-box;
  box-shadow: 0 0 20px rgba(255, 0, 212, 0.4);
  /* transform: translateY(-2px); */
  color: #fff;
  border-color: transparent;
}

.btn--lumio-outline {
  position: relative;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  border: 2px solid transparent;
  /* Reserve layout space */
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: all var(--transition-base);
  z-index: 1;
  padding-left: 3rem;
  /* Space for icon */
}

/* Gradient border via mask technique (allows transparent background) */
/* Moved to ::after so ::before can be the icon */
/* Property for animating gradient angle */
@property --lumio-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes lumio-rotate {
  from {
    --lumio-angle: 0deg;
  }

  to {
    --lumio-angle: 360deg;
  }
}

.btn--lumio-outline::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: var(--radius-full);
  /* Conic gradient for rotation effect */
  background: conic-gradient(from 45deg, #FF00D4, #00E0FF, #FF00D4);
  z-index: -1;
  /* Mask out the center */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  /* Border thickness */
  transition: all 0.5s ease-in-out;
  /* Continuous rotation */
  animation: lumio-rotate 3s linear infinite;
}

.btn--lumio-outline:hover::after {
  background: conic-gradient(from 360deg, #FF00D4, #00E0FF, #FF00D4);
}

.btn--lumio-outline:hover {
  box-shadow: 0 0 32px rgba(0, 224, 255, 0.4);
  /* Removed translateY */
  color: #fff;
}

.btn--lumio-outline:hover::after {
  filter: brightness(1.3);
  /* Speed up on hover? Optional, sticking to rotate */
}

.page-header {
  min-height: 60vh;

  background-attachment: fixed;
}

.page-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.page-header#product-page,
.page-header#operations-header,
.page-header#founders-header,
.page-header#case-studies-header,
.page-header#support-header {
  background-image: url(../images/page-images/adrien-olichon-RCAhiGJsUUE-unsplash.webp);
  background-size: cover;
  background-position: center;
}

.page-header#acquisition-header,
.page-header#payments-header,
.page-header#operators-header,
.page-header#infrastructure-header {
  background-image: url(../images/page-images/bia-w-a-SmkZz4aR-Ng-unsplash.webp);
  background-size: cover;
  background-position: center;
}

.page-header#customization-header,
.page-header#about-header,
.page-header#players-header,
.page-header#influencers-header {
  background-image: url(../images/page-images/brian-patrick-tagalog-_8hGFBxWD0A-unsplash.webp);
  background-size: cover;
  background-position: center;
}

.page-header#games-header,
.page-header#testimonials-header,
.page-header#api-header {
  background-image: url(../images/page-images/pawel-czerwinski-IcOg3D9yh0o-unsplash.webp);
  background-size: cover;
  background-position: center;
}

.page-header#lumio-header,
.page-header#streamer-header {
  background-image: url(../images/page-images/martin-martz-aT24h1Lm_vw-unsplash.webp);
  background-size: cover;
  background-position: center;
}

.page-header#about-header {
  background-image: url(../images/page-images/andrey-soldatov-jLdsBK4_y0A-unsplash.webp);
  background-size: cover;
  background-position: center;
}

/* Alternating Feature Cards Order */
.card--feature.card--image-left .card__content {
  order: 2;
}

.card--feature.card--image-left .card__image {
  order: 1;
}

.mb-3xl {
  margin-bottom: var(--space-3xl);
}

.mb-4xl {
  margin-bottom: var(--space-4xl);
}

/* Lumio Chat Input Component */
/* Homepage Pricing Card */
.homepage-pricing {
  grid-template-columns: 1.2fr 2fr;
}

.homepage-pricing .card__content {
  padding-right: 0;
}


/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 10, 10, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transform: translateY(100%);
  transition: transform 0.5s ease-out;
  box-shadow: 0 -4px 64px rgba(0, 0, 0, 0.5);
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  justify-content: space-between;
}

.cookie-banner__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.cookie-banner__text a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.cookie-banner__text a:hover {
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.btn--cookie-sm {
  padding: 8px 16px;
  font-size: var(--text-xs);
  border-radius: var(--radius-xl);
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.btn--cookie-accept {
  background: var(--color-primary);
  color: white;
  border: none;
}

.btn--cookie-accept:hover {
  background: color-mix(in srgb, var(--color-primary), white 10%);
}

.btn--cookie-decline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.btn--cookie-decline:hover {
  background: rgba(255, 255, 255, 0.1);
}


/* Cookie Preferences Modal */
.cookie-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.cookie-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cookie-modal {
  background: var(--color-surface-elevated) radial-gradient(circle at bottom left, rgba(0, 30, 34, 0.7) 0%, rgba(0, 0, 0, .7) 80%);
  width: 90%;
  max-width: 960px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 0 128px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.cookie-modal__header {
  padding: var(--space-lg);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cookie-modal__header h3 {
  font-size: var(--text-xl);
  margin: 0;
}

.cookie-modal__close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-xl);
}

.cookie-modal__body {
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--space-lg);
  overflow-y: auto;
}

.cookie-option {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  padding-left: var(--space-md);

}

.cookie-option:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cookie-option__info h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-xs);
}

.cookie-option__info p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);

  line-height: 1.4;
}

.cookie-option.toggle-all {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  padding-left: 0;
}

.btn--tertiary {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-weight: 600;
}

.btn--tertiary:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Switch Toggle */
.cookie-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-surface-light);
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--color-primary);
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--color-primary);
}

input:checked+.slider:before {
  transform: translateX(20px);
}

input:disabled+.slider {
  background-color: var(--color-border);
  cursor: not-allowed;
}

.cookie-modal__footer {
  padding: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.cookie-modal__actions-group {
  display: flex;
  gap: var(--space-md);
}


/* Home Heading Icons */
.home-heading-icon {
  height: 0.8em;
  vertical-align: middle;
  margin-right: 0em;
  margin-bottom: 0.15em;
}


/* Icon Utility for Arrow Down Right */
.icon-arrow-down-right {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  margin-left: 8px;
  overflow: visible;
}

.icon-arrow-down-right path {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  stroke: currentColor;
  fill: transparent !important;
  transform-origin: 12px 4px;
}

/* Animate to straight line on hover */
/* Removed container animation */
.btn--outline:hover .icon-arrow-down-right,
.btn--secondary:hover .icon-arrow-down-right {
  animation: none;
}

/* Stretch down after morph */
.btn--outline:hover .icon-arrow-down-right .arrow-path,
.btn--secondary:hover .icon-arrow-down-right .arrow-path {
  animation: arrow-path-stretch 1.5s ease-in-out infinite 0.4s;
}

/* Adjust head position to match stretch */
.btn--outline:hover .icon-arrow-down-right .arrow-head,
.btn--secondary:hover .icon-arrow-down-right .arrow-head {
  animation: arrow-head-stretch 1.5s ease-in-out infinite 0.4s;
}

@keyframes arrow-path-stretch {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.25);
  }
}

@keyframes arrow-head-stretch {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(4.5px);
  }
}

/* CTA Right Module */
.cta-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  /* Override text-center on desktop */
}

.cta-right .btn {

  margin: 0;

}

.cta-right-text {
  flex: 1;
}

.cta-right-buttons {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  margin-left: var(--space-xl);
}


/* Chatbot Card Override */
.carousel-card--chat {
  padding: 0;
  position: relative;
}

.carousel-card--chat.visible.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 0, 212, 0) 0%, rgba(255, 0, 212, 0.05) 30%, rgba(0, 224, 255, 0.05) 70%, rgba(0, 224, 255, 0) 100%);
  transform: translateX(-110%) skewX(25deg);
  /* animation: card-shimmer-chat 8s infinite linear; */
  pointer-events: none;
  z-index: 10;
}

@keyframes card-shimmer-chat {
  0% {
    transform: translateX(-150%) skewX(25deg);
  }

  100% {
    transform: translateX(150%) skewX(15deg);
  }
}

.carousel-card--chat.visible.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 0, 212, 0) 0%, rgba(255, 0, 212, 0.05) 30%, rgba(255, 0, 212, 0.05) 90%, rgba(255, 0, 212, 0.00) 100%);
  transform: translateX(210%) skewX(15deg);
  /* animation: card-shimmer-chat-reverse 8s infinite linear; */
  pointer-events: none;
  z-index: 10;
  opacity: 0.5;
  mix-blend-mode: normal;
}

@keyframes card-shimmer-chat-reverse {
  0% {
    transform: translateX(150%) skewX(15deg);
  }

  100% {
    transform: translateX(-150%) skewX(25deg);
  }
}

.carousel-card--chat .carousel-card__content {
  padding: 0;
  flex: 1;
  /* override flex: 0 0 auto */
  width: 100%;
  height: 100%;
  display: flex;
}

/* Chatbot Mockup inside Carousel */
.lumio-mockup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* keeps suggestion/input at bottom */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.lumio-mockup-header {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;

  transform: translateX(-50%);

  transition: all 0.5s ease-in-out;
}

.lumio-mockup-header lumio-avatar::after {
  content: '';
  position: absolute;
  bottom: -50%;
  /* drop shadow at lumio avatar's feet */
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #FF00D4 0%, #00E0FF 100%);
  border-radius: 50%;
  filter: blur(32px);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}

.lumio-mockup-header .lumio-icon {
  width: 48px;
  height: auto;
  margin-bottom: var(--space-md);
  filter: none;
}

.lumio-mockup-header .lumio-icon.lumio-secondary,
.lumio-secondary {
  content: url(../images/lumio-icon-outline.svg);
  filter: none;
  opacity: 0.8;
}

.lumio-mockup-header h3 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}

.lumio-suggestions {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  position: absolute;
  bottom: 76px;
  left: 0;
  padding: 0 var(--space-md) var(--space-lg);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr;
  flex-shrink: 0;
  z-index: 50;
}

.lumio-suggestions-inner {
  min-height: 0;
  overflow: hidden;
}

.lumio-suggestion-nav {
  position: absolute;
  top: calc(50% - (var(--space-lg) / 2));
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(60, 60, 60, 1);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  /* matched carousel-controls */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  /* matched carousel-controls */
}

/* Invisible expansive click area to prevent falling through to suggestions */
.lumio-suggestion-nav::before {
  content: '';
  position: absolute;
  top: -32px;
  bottom: -32px;
  left: -16px;
  right: -16px;
  border-radius: 50%;
  z-index: -1;
}

.lumio-suggestion-nav.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hide arrows while suggestions are fading in/out or loading */
.lumio-suggestions.suggestions-animating .lumio-suggestion-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.95) !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lumio-suggestion-nav:hover {

  transform: translateY(-50%) scale(1.05);

}

.lumio-suggestion-nav--prev {
  left: -4px;
}

.lumio-suggestion-nav--next {
  right: -4px;
}

.lumio-suggestions-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: var(--space-md);
  margin-left: 4px;
}

.lumio-suggestions-cards {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding: 0;
  /* Remove horizontal padding since chat-messages has it */
  margin: 0;
  /* No negative margin needed anymore */
  scrollbar-width: none;
  /* Firefox */
  -webkit-mask-image: linear-gradient(to right, transparent 0px, black 32px, black calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, transparent 0px, black 32px, black calc(100% - 64px), transparent);
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
  /* This prevents the cards from shrinking to height:0 during flex column wrapping */
  flex-shrink: 0;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
}

.lumio-suggestions-cards::-webkit-scrollbar {
  display: none;
}

.lumio-suggestion-card {
  flex: 1 1 0;
  min-width: 150px;
  background: var(--color-bg-glass);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  text-wrap: balance;
  scroll-snap-align: start;
}

.lumio-suggestion-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* --- Suggestion skeleton shimmer --- */
@keyframes suggestion-shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.lumio-suggestion-card.is-skeleton {
  pointer-events: none;
  cursor: default;
  /* Overwrite the glass background with the shimmer wash */
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.04) 60%,
      rgba(255, 255, 255, 0.04) 100%);
  background-size: 800px 100%;
  animation: suggestion-shimmer 1.6s ease-in-out infinite;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Fake text lines inside the skeleton card */
.lumio-suggestion-card.is-skeleton .suggestion-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lumio-suggestion-card.is-skeleton .suggestion-skeleton-line {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.lumio-suggestion-card.is-skeleton .suggestion-skeleton-line:first-child {
  width: 80%;
}

.lumio-suggestion-card.is-skeleton .suggestion-skeleton-line:nth-child(2) {
  width: 60%;
}

/* Typing effect for suggestion cards revealed after skeleton */
.lumio-suggestion-card .suggestion-typing-char {
  opacity: 0;
  transition: opacity 0.12s ease-out;
}

.lumio-suggestion-card .suggestion-typing-char.visible {
  opacity: 1;
}

/* --- In-card "Try this with Lumio" prompts --- */
.lumio-try-prompts {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lumio-try-prompts__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.lumio-try-prompts__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.lumio-try-prompts__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lumio-try-prompts__list .lumio-suggestion-card {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-6xl);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  scroll-snap-align: none;
}

.lumio-try-prompts__list .lumio-suggestion-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* --- Premium staggered entrance + exit for the "Try this with Lumio" block ---
   Implemented with transitions (rather than animations) so each direction has
   its own timing. Off-screen cards sit at opacity:0 with a faint downward
   offset and slight blur — no permanent will-change so the compositor isn't
   holding GPU layers for inactive cards. */
.lumio-try-prompts__label,
.lumio-try-prompts__list .lumio-suggestion-card {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(4px);
  /* Exit timing — applies when .active is removed (faster, ease-in feel,
     so the panel tucks away crisply without lingering). Per-element
     transition-delay below produces a reverse stagger: buttons leave
     last → first, label trails. background-color/border-color are also
     listed so the button :hover stays smooth (with their own 0s delay). */
  transition:
    opacity 0.45s cubic-bezier(0.55, 0, 0.78, 0.2),
    transform 0.45s cubic-bezier(0.55, 0, 0.78, 0.2),
    filter 0.45s cubic-bezier(0.55, 0, 0.78, 0.2),
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Reverse-stagger exit delays (last button leaves first, label last).
   The 5-value list maps positionally to the 5 transition properties — the
   last two (background-color, border-color) always stay at 0s so :hover
   responds instantly regardless of stagger position. */
.lumio-try-prompts__list .lumio-suggestion-card:nth-child(4) {
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}

.lumio-try-prompts__list .lumio-suggestion-card:nth-child(3) {
  transition-delay: 0.06s, 0.06s, 0.06s, 0s, 0s;
}

.lumio-try-prompts__list .lumio-suggestion-card:nth-child(2) {
  transition-delay: 0.12s, 0.12s, 0.12s, 0s, 0s;
}

.lumio-try-prompts__list .lumio-suggestion-card:nth-child(1) {
  transition-delay: 0.18s, 0.18s, 0.18s, 0s, 0s;
}

.lumio-try-prompts__label {
  transition-delay: 0.24s;
}

/* Active state: the entrance overrides the transition with a longer,
   ease-out timing and a long lead-in delay so a transient .active flip
   during a scroll cancels the reveal before it visibly starts. */
.carousel-card.active .lumio-try-prompts__label,
.carousel-card.active .lumio-try-prompts__list .lumio-suggestion-card {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-card.active .lumio-try-prompts__label {
  transition-delay: 0s;
}

.carousel-card.active .lumio-try-prompts__list .lumio-suggestion-card:nth-child(1) {
  transition-delay: 0.15s;
}

.carousel-card.active .lumio-try-prompts__list .lumio-suggestion-card:nth-child(2) {
  transition-delay: 0.27s;
}

.carousel-card.active .lumio-try-prompts__list .lumio-suggestion-card:nth-child(3) {
  transition-delay: 0.39s;
}

.carousel-card.active .lumio-try-prompts__list .lumio-suggestion-card:nth-child(4) {
  transition-delay: 0.51s;
}

/* Already-used suggestions fade slightly. Specificity (0,4,1) beats both the
   default and .active opacity rules; on inactive cards the default opacity:0
   still wins so the click marker doesn't keep the prompt visible off-card. */
.carousel-card.active .lumio-try-prompts__list .lumio-suggestion-card.is-clicked {
  opacity: 0.75;
}

/* --- Click choreography: fly out toward the chat, pop back at the bottom --- */
/* Fly-out: slide left + fade, with explicit transition so it overrides both
   the staggered exit transition and the entrance transition-delay. */
.lumio-try-prompts__list .lumio-suggestion-card.is-flying-out {
  opacity: 0 !important;
  /* Width collapses to 50% from the right edge while the whole element slides
     left — together they read as "the suggestion is being pulled toward the
     chat on the left". The flex parent (align-items: stretch by default) lets
     the explicit width override stretch, and with no align-self the item
     stays anchored to the cross-axis start (left edge). */
  width: 50% !important;
  transform: translateX(-60px) !important;
  filter: blur(2px) !important;
  pointer-events: none;
  /* !important on the shorthand applies to every transition longhand it sets,
     including transition-delay (which is implicitly 0s here). Without it the
     `.active :nth-child` rules above (specificity 0,5,0) win for delay and the
     fly-out would inherit the entrance stagger. */
  transition:
    opacity 0.35s cubic-bezier(0.55, 0, 0.78, 0.2),
    transform 0.35s cubic-bezier(0.55, 0, 0.78, 0.2),
    filter 0.35s cubic-bezier(0.55, 0, 0.78, 0.2),
    width 0.35s cubic-bezier(0.55, 0, 0.78, 0.2) !important;
}

/* Pop-in: appear from below at the bottom of the list, settling into the
   "already used" 0.75 opacity. animation-fill-mode: forwards holds the
   end state until the class is removed and .is-clicked takes over. */
.lumio-try-prompts__list .lumio-suggestion-card.is-popping-in {
  animation: lumioPromptPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lumioPromptPopIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(4px);
  }
  100% {
    opacity: 0.75;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lumio-try-prompts__list .lumio-suggestion-card.is-flying-out,
  .lumio-try-prompts__list .lumio-suggestion-card.is-popping-in {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lumio-try-prompts__label,
  .lumio-try-prompts__list .lumio-suggestion-card {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none !important;
  }
}

[data-typing="true"]:not([data-typing-applied="true"]) {
  visibility: hidden;
}

.typing-char {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.typing-char.visible {
  opacity: 1;
}

/* Override existing float for context */


/* Hide guiding arrow by default */
.guiding-arrow {
  opacity: 0;
  transition: opacity 0.5s 1s ease-in-out;
}

/* Show guiding arrow when section is visible */
section.visible .guiding-arrow {
  opacity: 1;
}

.shimmer-bg {
  background-color: var(--color-surface) !important;
  animation: shimmer-bg 2s infinite linear;
}

.shimmer-bg-dsadsa::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(to right, rgba(255, 0, 212, 0) 0%, rgba(0, 224, 255, .03) 50%, rgba(255, 0, 212, 0) 100%);
  /* Use transform (GPU compositor) instead of `left` (layout/raster) so the
       animation never invalidates the card's backdrop-filter texture */
  transform: translateX(-110%) skewX(25deg);
  will-change: transform;
  animation: shimmer-bg 2s 2s infinite linear;
  pointer-events: none;
  z-index: 10;
}

@keyframes shimmer-bg {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
    /* pause: element is off the right edge and stays there */
  }
}

/* @keyframes shimmer-bg {
  0% {
    transform: translateX(-110%) skewX(25deg);
  }

  50%,
  100% {
    transform: translateX(110%) skewX(25deg);
  }
} */



/* TEMPLATES */

.template-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.template-card:hover {
  transform: scale(1.02);
}

.template-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.template-card:hover .template-thumbnail {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.template-title {
  margin-top: var(--space-md, 1rem);
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  text-align: center;
}


.light-shafts {
  position: absolute;

  top: calc(-1 * var(--space-2xl));
  right: 0;
  width: 1500px;
  height: 1500px;
  transform: translateX(15%);
  background-image: url('../images/lights-deco-r3.avif');
  background-size: 100% 100%;
  background-position: right -600px;
  background-repeat: no-repeat;
  z-index: 100;
  opacity: .7;
  pointer-events: none;

}

.light-shafts.lights-centered {

  background-image: url('../images/lights-deco-centered-bottom.avif');
  top: auto;
  bottom: -2500px;
  left: 50%;
  width: 3000px;
  height: 3500px;
  transform: translateX(-50%);
  background-position: center 0px;
  mix-blend-mode: hard-light;
  opacity: .7;
  /* filter: blur(20px); */
  z-index: -1;
  mix-blend-mode: overlay;
}

/* Stats Section */
.stats-section {
  padding: var(--space-2xl) 0;

}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: var(--space-md);
  text-align: center;

  /* background-color: var(--color-bg-glass);
  border-radius: var(--radius-6xl); */
  /* padding: var(--space-2xl); */

}

.stats-grid .stat-item:first-child {

  /* justify-content: flex-start;
  align-items: flex-start;
  margin-left: var(--space-xl); */
}

.stats-grid .stat-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stats-grid .stat-item.divided{

  border-left: solid 1px var(--color-border);

}

/* Narrow variant — cluster the stats together and centre them on their own
   content width instead of spreading them across the full container width.
   Scoped to desktop so the mobile grid layout (style-mobile.css, last stat on
   its own row) is left untouched. */
@media (min-width: 769px) {
  .stats-grid.stats__narrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3xl);
  }

  .stats-grid.stats__narrow--wide {
    gap: calc(var(--space-3xl) * 3);
  }
}

.stat-value {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 800;
}

.stat-label {
  font-weight: 300;
  letter-spacing: 0.02em;
}

.stat-stars {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.stat-stars svg {
  width: 20px;
  height: 20px;
}

section#community-control {

  overflow: hidden;
  border-radius: var(--radius-6xl) var(--radius-6xl) 0 0;
  background-color: var(--color-bg-glass);

}

section#community-control,
section#community-control * {
  position: relative;
}

section#community-control .parallax-background {
  display: block;
  position: absolute;
  top: -10%;
  right: 0;
  width: 80%;
  height: 120%;
  background: url('../images/community.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  z-index: 0;

  mask: var(--carousel-card-background-mask-half-width);
}


#globe-container {

  mask:linear-gradient(330deg, transparent 40%, black 50%);
  -webkit-mask: linear-gradient(330deg, transparent 40%, black 50%);

  transform: scale(1.3);
  pointer-events: none;

}

/* =============================================================
   LIVE PILL
   Tiny eyebrow pill with an animated indicator dot. Used above
   page heroes (marketplace, templates, etc.) to flag live state
   like "X brands live now" or "Templates ready to launch".
   The dot's ring is animated via transform+opacity (compositor)
   instead of box-shadow (paint-each-frame).
   ============================================================= */

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xl);
}

.live-pill .live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

.live-pill .live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-success);
  opacity: 0.5;
  animation: live-pulse 2.2s ease-out infinite;
  will-change: transform, opacity;
}

@keyframes live-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(3.2); opacity: 0;   }
  100% { transform: scale(3.2); opacity: 0;   }
}

/* Paper-white counterpart for when the pill sits inside a .theme-light story-arc. */
.theme-light .live-pill {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary);
}