/* ==========================================================================
   CRM — this page's tuning of the shared family sections
   ==========================================================================
   The shared sections (Features/shared) are written for the family and name no
   page. Where this page needs one of them to behave differently, the deviation
   is declared HERE — never back in the shared sheet, and never in one section's
   own sheet, which would make it that section's business to know what sits
   above or below it on this page.

   Loaded by the page shell AFTER every section sheet, so these rules land last.
   Three things are tuned, and they are unrelated:
     1. the hero's availability badge, unique to this unreleased feature;
     2. where the family's under-the-hero band falls, since this page slips a
        strip between the hero and the first real section;
     3. the manifesto's measure, because this page's three losses are the
        longest in the family.
   ========================================================================== */

/* --- 1. Availability badge ------------------------------------------------- */

/* Temporary release communication lives in this page-owned shell. It composes
   the canonical shared hero with the CRM-only roadmap link, keeping every
   sibling feature page free of inert markup. Remove the shell partial, these
   rules and the two `hero` i18n keys when CRM is released. */
.features-page #hero-container .crm-hero-shell {
  position: relative;
}

/* A compact red status badge replaces the family's flanked eyebrow. The crisp
   white status light, inset highlight and faint outer keyline make it visible
   against the dark hero without competing with the CRM wordmark below. */
.features-page #hero-container .feat-immersive-hero__badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  min-height: 2.7rem;
  padding: 0.78rem 1.25rem;
  margin-bottom: clamp(2.8rem, 4vw, 3.6rem);
  gap: 0.72rem;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--feat-radius-pill);
  background: linear-gradient(135deg, #ff3b5d 0%, #e0133a 52%, #bd082c 100%);
  box-shadow:
    0 12px 32px rgba(183, 7, 43, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(96, 2, 22, 0.22);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1;
}

/* The dot is the one functional cue: a simple release-status light. */
.features-page #hero-container .feat-immersive-hero__badge::before {
  content: '';
  display: block;
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.16);
}

/* A hairline outside the badge gives the red surface a clean, finished edge. */
.features-page #hero-container .feat-immersive-hero__badge::after {
  content: '';
  position: absolute;
  inset: -0.28rem;
  width: auto;
  height: auto;
  border: 1px solid rgba(255, 83, 113, 0.18);
  border-radius: inherit;
  background: none;
  pointer-events: none;
}

/* A quiet secondary action directly under the availability badge. The short
   underline grows toward the arrow on hover, keeping the contact invitation
   legible without giving it button weight. */
.features-page #hero-container .feat-immersive-hero__roadmap-link {
  position: absolute;
  top: calc(clamp(3.5rem, 7vh, 5.5rem) + 3.4rem);
  left: 50%;
  z-index: 3;
  display: flex;
  width: max-content;
  gap: 0.42rem;
  align-items: center;
  margin: 0;
  color: rgba(226, 219, 248, 0.78);
  font-size: 0.78rem;
  font-weight: 540;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-decoration-color: rgba(255, 76, 108, 0.46);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3rem;
  transform: translateX(-50%);
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
}

.features-page #hero-container .feat-immersive-hero__roadmap-link::after {
  content: '→';
  color: #ff607c;
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.features-page #hero-container .feat-immersive-hero__roadmap-link:hover {
  color: #fff;
  text-decoration-color: #ff607c;
}

.features-page #hero-container .feat-immersive-hero__roadmap-link:hover::after {
  transform: translateX(0.18rem);
}

.features-page #hero-container .feat-immersive-hero__roadmap-link:focus-visible {
  border-radius: 0.2rem;
  outline: 2px solid #ff607c;
  outline-offset: 0.35rem;
}

@media (max-width: 760px) {
  .features-page #hero-container .feat-immersive-hero__badge {
    min-height: 2.45rem;
    padding: 0.7rem 1.05rem;
    margin-bottom: 2.8rem;
    font-size: 0.66rem;
  }

  .features-page #hero-container .feat-immersive-hero__roadmap-link {
    top: 5.6rem;
    max-width: calc(100vw - 2.5rem);
    font-size: 0.72rem;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .features-page #hero-container .feat-immersive-hero__roadmap-link,
  .features-page #hero-container .feat-immersive-hero__roadmap-link::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .features-page #hero-container .feat-immersive-hero__badge {
    color: CanvasText;
    border: 1px solid CanvasText;
    background: Canvas;
  }

  .features-page #hero-container .feat-immersive-hero__badge::before {
    background: CanvasText;
  }

  .features-page #hero-container .feat-immersive-hero__roadmap-link,
  .features-page #hero-container .feat-immersive-hero__roadmap-link::after {
    color: LinkText;
  }
}

/* --- 2. The band under the hero -------------------------------------------- */

/* PageStyles gives the first section under the hero an extra 4rem: the hero
   closes on a tight edge, so the section below carries the half of the rhythm
   it does not. On this page that first slot is the works-with strip, which is
   the hero's own last line and has to sit right under the actions. So the strip
   declines the band and the manifesto, one div further down, takes it. Both
   selectors restate the family's own shape so they outrank it. */
.features-page #features-content > div:first-child + div .crm-logos {
  padding-top: 0;
}

.features-page #features-content > div:first-child + div + div section {
  padding-top: calc(var(--feat-rhythm) + 4rem);
}

/* --- 3. The manifesto's measure -------------------------------------------- */

/* The three losses this page names are the family's longest, and they miss the
   shared 1180px container by a hair: the row measures 1201px in French and
   1212px in English at desktop, so it broke onto a second line and the band lost
   its one-glance read. Widened rather than trimmed, because the band is a
   centred row that aligns with nothing beside it: only the manifesto's own
   container moves, and it is invisible except that the three items now fit. The
   narrower gutter buys the last 16px, which is what keeps the English row (the
   longer of the two) on one line at 1100px instead of clearing it by four.

   Measured threshold: one line from 1080px up in both languages. Below that the
   row wraps, and below 860px the shared sheet re-cuts it as a column, exactly as
   it does on the sibling pages. */
.features-page #manifesto-container .feat-container {
  width: min(1260px, calc(100% - 1.5rem));
}