/* ==========================================================================
   Features — Shared page shell
   ==========================================================================
   The design grammar every Feature page shares: "annotated speech". Human
   sentences are set big in the sans face; the machine (Bloom's coach)
   annotates them in small mono chips and draws a waveform under the words
   that matter — the same grammar the product applies to real calls.

   Two editorial bands rhythm every page: the signal band (violet — the
   problem in the raw conversation) and the value band (mint — what the
   coach produces from it). Everything else stays quiet.

   Loaded after Tokens.css; section layouts live next to their fragments in
   shared/sections/<Name>/<Name>.css.
   ========================================================================== */

/* --- Page shell ----------------------------------------------------------- */

.feat-container {
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* Feature pages compose their stories with sticky stages. The global shell uses
   overflow-x:hidden, which makes each of these a scroll container and disables
   CSS sticky outright; `clip` keeps the horizontal guard without creating one.
   This belongs to the page shell — no section may redefine the page's own
   scroll model.

   The root is deliberately left alone. Its overflow is propagated to the
   viewport rather than making it a scroll container, so clipping it buys
   nothing for sticky — measured: an element still pins with only these two
   clipped. No other family touches the root, and this one has no reason to. */
body.features-page,
body.features-page #app {
  overflow-x: clip;
}

/* --- Vertical rhythm ------------------------------------------------------- */

/* One gap between sections, everywhere. Each section owns half of it, so the
   page never depends on who happens to sit above or below. Sections that meet
   over a separator swap in the junction value instead (see below). */
.features-page {
  --feat-rhythm: clamp(4.5rem, 7.5vw, 6.25rem);
  --feat-rhythm-junction: clamp(2rem, 3vw, 2.75rem);
}

/* Family-level classes only: a page-local section opts in by wearing
   `feat-section`, never by being named here. */
.features-page .feat-section,
.features-page .feat-manifesto,
.features-page .feat-story,
.features-page .feat-related {
  padding-block: var(--feat-rhythm);
}

/* The hero closes on its own tight edge, so the section under it carries the
   half of the gap the hero does not. */
.features-page #features-content > div:first-child + div section {
  padding-top: calc(var(--feat-rhythm) + 4rem);
}

.feat-section {
  position: relative;
}

/* --- The machine's voice: mono eyebrows and annotation chips -------------- */

.feat-eyebrow {
  margin: 0 0 0.95rem;
  color: var(--feat-violet-soft);
  font-family: var(--feat-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Annotation chip — the coach's tag pinned onto human copy. */
.feat-annotation {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.32rem 0.72rem;
  border: 1px solid var(--feat-line);
  border-radius: var(--feat-radius-pill);
  background: var(--feat-surface-2);
  color: var(--feat-violet-soft);
  font-family: var(--feat-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.feat-annotation i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--feat-violet);
  box-shadow: 0 0 10px rgba(var(--feat-violet-rgb), 0.8);
}

/* --- The human voice: headings and ledes ----------------------------------- */

.feat-section-head {
  max-width: 780px;
  margin-bottom: clamp(2.6rem, 5vw, 4.2rem);
}

.feat-section-head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* A claim written as TWO statements rather than one sentence left to wrap: the
   break belongs to the copy, so each fragment takes its own line at every
   width. The family's heading line-height is cut tight for one-line posters and
   grazes the descenders once a second line carries the weight of the claim, so
   this opens it a hair — including under the painted words. */
.feat-section-head--two-line .feat-title span {
  display: block;
}

.feat-section-head--two-line .feat-title {
  line-height: 1.04;
}

.feat-section-head--two-line .feat-highlight {
  padding-bottom: 0.08em;
}

/* Section headings sit on the sitewide narrative scale (HomePage
   NarrativeStyles), so a Feature page speaks at the same volume as the rest of
   the site instead of one notch below it. */
.feat-title {
  margin: 0;
  color: var(--feat-text);
  font-size: var(--feat-title-section-size);
  font-weight: 820;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.feat-highlight {
  padding-inline: 0.06em;
  margin-inline: -0.06em;
  color: transparent;
  background: var(--brand-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Section subtitles are justified like the hero lede, so every block of body
   copy on a Feature page shares one edge. `hyphens` comes with it: on a 660px
   measure, justification without hyphenation opens rivers between words. */
.feat-lede {
  max-width: 660px;
  margin: 1.15rem 0 0;
  color: var(--feat-muted);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 430;
  letter-spacing: -0.012em;
  line-height: 1.65;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

.feat-section-head--center .feat-lede {
  margin-right: auto;
  margin-left: auto;
}

/* --- CTA rows ---------------------------------------------------------------- */

.feat-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.feat-cta-row .btn {
  padding: 0.95rem 1.7rem;
  font-size: 1rem;
  font-weight: 600;
}

/* --- Separators (shared decoration injected into .separatorN-placeholder) ---- */

/* The placeholder is emitted as the trailing element of the section ABOVE, and
   the shared component is injected into it at runtime. */
.feat-separator {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(28px, 3.5vw, 44px);
  margin: clamp(1.25rem, 3vw, 2.25rem) 0;
}

/* Where a separator lands, both neighbours give back part of their rhythm so
   the line reads as a junction instead of floating in an empty band. Sections
   are injected into their own containers, so the receiving section is never a
   sibling of the separator — it sits in the next container. */
.features-page #features-content > div:has(> .feat-separator) section {
  padding-bottom: var(--feat-rhythm-junction);
}

.features-page #features-content > div:has(> .feat-separator) + div section {
  padding-top: var(--feat-rhythm-junction);
}

/* The scaffold gives a story a tall row and centres its columns in it. Under a
   separator that slack lands entirely between the line and the first line of
   copy, which reads as a hole; the row hugs its content instead, and the
   padding above is then the only distance the eye measures. */
.features-page #features-content > div:has(> .feat-separator) + div .feat-story__layout {
  min-height: 0;
}

/* The shared variant ships the vertical rhythm it needs on pages that stack it
   straight against a section. Here the slot above owns that spacing, so the
   component gives its own margins back and only keeps its drawing. */
.feat-separator .section-separator {
  max-width: min(400px, 78vw);
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

/* --- Responsive --------------------------------------------------------------- */

/* Same rule the hero lede follows: justification only pays off on the wide
   desktop column. Below it the measure is too narrow and the word spacing
   opens up, so the subtitle goes back to whatever its header aligns to. */
@media (max-width: 1100px) {
  .feat-lede {
    text-align: inherit;
  }
}

@media (max-width: 760px) {
  .feat-container {
    width: min(100% - 1.5rem, 42rem);
  }

  /* Mobile feature pages use one heading axis from hero to closing CTA.
     Centre headlines only; body copy, notes and accordion content keep their
     natural left edge for readability. */
  .features-page .feat-title,
  .features-page .feat-story__title,
  .features-page .shared-faq-title,
  .features-page .feat-related .dls__title,
  .features-page .feat-cta-card__title {
    text-align: center;
  }

  .features-page .feat-eyebrow {
    text-align: center;
  }

  /* Desktop gives each story fragment its own editorial line. On a phone that
     creates short, artificial lines, so the two translated fragments rejoin
     and wrap only where the available width actually requires it. */
  .features-page .feat-story__title > span {
    display: inline;
  }

  .features-page .feat-story__title-accent {
    width: auto;
    margin-inline: 0;
  }

  .feat-title {
    font-size: var(--feat-title-section-size-mobile);
    line-height: 1;
  }

  .feat-section {
    padding: 3.8rem 0;
  }

  .feat-section-head {
    margin-bottom: 2.3rem;
  }
}

/* Forced colours remove the gradient these words are painted with, and the
   glyphs are transparent without it. Give the system its own ink back. */
@media (forced-colors: active) {
  .feat-highlight {
    color: CanvasText;
    background: none;
  }
}