/* Time features section — uses a 12-col grid that matches the design system:
   1360 container, 20px gutters, 12 equal columns (~95px each). */
.features {
  padding-block: clamp(60px, 9vh, 140px);
  position: relative;
  /* overflow visible so clouds anchored to this section can bleed into
     neighboring sections as the viewport narrows. `main { overflow: hidden }`
     (in base.css) keeps horizontal scrollbars from ever appearing. */
  overflow: visible;
  isolation: isolate;
}

/* Section background image — anchored so the image's CENTER lands at the
   position defined by --bg-x / --bg-y of the section (percentages of the
   section box). Image renders at natural size so it fills outward from that
   anchor; section's overflow:hidden clips anything past the section edges.
   Activated per-section by setting --bg-img (and optionally --bg-x/--bg-y). */
.features::before {
  content: '';
  position: absolute;
  top: var(--bg-y, 50%);
  left: var(--bg-x, 27%);
  width: var(--bg-w, 1000px);
  height: var(--bg-h, 1000px);
  transform: translate(-50%, -50%);
  background-image: var(--bg-img, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: -1;
}

/* The figure for these sections is rendered entirely by the Rive canvas
   (.features__bg-icons-rive) inside .features__art — image baked into the riv.
   No static bg image; the .features::before pseudo stays off here. */
.features--bg-wb {
  --bg-x: 73%;          /* mirror of time's default 27% */
}

.features--bg-time::before,
.features--bg-wb::before { content: none; }

/* ============================================================
   Figure wrapper — provides a 100vh containing block for the bg illustration
   and its floating icons, anchored at the top of the section. The negative
   bottom margin zeroes its layout cost so the feature grid below isn't
   pushed down. (Earlier this was position:sticky to pin the figure while
   the rows scrolled past, but the surrounding stacking context prevented
   sticky from engaging — relative gives identical visuals without the
   inert property.)
   ============================================================ */
.features__art {
  position: relative;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  /* z-index -2 puts the figure BENEATH the decorative clouds (which sit
     at -1 by default). Without this, the figure paints over the clouds
     and crops them at its silhouette edges. */
  z-index: -2;
  margin-bottom: -100vh;
}
@media (max-width: 860px) {
  /* Mobile: don't pin. Let the figure scroll naturally with the section. */
  .features__art {
    position: static;
    height: auto;
    margin-bottom: 0;
  }
}


/* Decorative cloud layered above the section's bg image but behind the content.
   z-index: -1 with the section's `isolation: isolate` keeps it contained, and
   the parent's overflow:hidden clips any bleed. */
.features__cloud {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

/* Decorative clouds layered above the bg image's cloud platform under the man.
   All anchored to the right side of the section (where the figure sits). */
.features--left .features__cloud {
  /* Main cloud — wide, sitting low under the figure's cloud platform */
  left: auto;
  right: -4%;
  top: auto;
  bottom: -4%;
  transform: none;
  width: 60%;
  max-width: 820px;
  height: auto;
  opacity: 0.7;
}

/* Secondary cloud — smaller, sitting just above the main cloud */
.features--left .features__cloud--low {
  left: auto;
  right: 8%;
  top: auto;
  bottom: calc(6% + 500px);
  transform: none;
  width: 28%;
  max-width: 420px;
  opacity: 0.4;
}

/* Tertiary cloud — faint, off to the left of the figure for depth */
.features--left .features__cloud--seat {
  left: auto;
  right: 38%;
  top: auto;
  bottom: 12%;
  transform: none;
  width: 22%;
  max-width: 360px;
  opacity: 0.3;
}

/* Big faint cloud beneath the bg-time figure (time section) for depth. */
.features--bg-time .features__cloud--under {
  left: 2%;
  top: auto;
  bottom: calc(21% - 80px);
  transform: none;
  width: 50%;
  max-width: 700px;
  opacity: 0.4;
}

/* Highlight cloud above the figure — time section (figure on the left). */
.features--bg-time .features__cloud--above {
  top: 44%;
  left: -8%;
  bottom: auto;
  right: auto;
  transform: none;
  width: 32%;
  max-width: 480px;
  opacity: 0.55;
}

/* Highlight cloud above the figure — wellbeing section (figure on the right). */
.features--bg-wb .features__cloud--above {
  top: 10%;
  right: -10%;
  bottom: auto;
  left: auto;
  transform: none;
  width: 32%;
  max-width: 480px;
  opacity: 0.55;
}

/* Big faint cloud beneath the bg-wb figure (wellbeing section) — anchored
   from the top so it lands just past the figure's bottom edge rather than
   overlapping the corner cloud at the section bottom. */
.features--bg-wb .features__cloud--under {
  top: 48%;
  right: 4%;
  bottom: auto;
  left: auto;
  transform: none;
  width: 50%;
  max-width: 700px;
  opacity: 0.55;
}

/* Rive 4-icon cluster overlay anchored on the figure. The canvas occupies
   the same 1000×1000 box that the figure's icon positions are drawn against,
   so the Rive composition aligns with the figure illustration. */
.features__bg-icons-rive {
  position: absolute;
  top: var(--bg-y, 50%);
  left: var(--bg-x, 27%);
  width: var(--bg-w, 1000px);
  height: var(--bg-h, 1000px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.features--bg-wb .features__bg-icons-rive {
  left: 73%;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}

/* Default: right-side content occupies columns 8 through 12 (5 cols wide) */
.features__content {
  grid-column: 8 / span 5;
}

/* Mirror modifier: same column count, anchored to the left (cols 1–5) */
.features--left .features__content {
  grid-column: 1 / span 5;
}

/* Wellbeing section flush with the previous section (no top padding). */
.features--left {
  padding-top: 0;
}

/* ---------- Intro (eyebrow + script heading) ---------- */

.features__intro {
  margin-bottom: clamp(8px, 1.5vh, 20px);
}

.features__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  background: var(--c-sage);
  color: #fff;
  border-radius: var(--radius-pill);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.features__heading {
  font-family: var(--ff-script);
  font-weight: 700;
  font-size: clamp(44px, 4.4vw, 62px);
  line-height: 0.95;
  color: var(--c-navy);
  margin-top: 18px;
}

.features__period {
  color: var(--c-sage);
}

/* ---------- Feature list ---------- */

.features__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  align-items: start;
  padding-block: clamp(22px, 3vh, 32px);
}

.features__item + .features__item {
  border-top: 1px solid rgba(57, 93, 127, 0.2); /* --c-navy @ 20% */
}

.features__icon {
  width: 80px;
  height: 80px;
  flex: 0 0 auto;
  display: block;
  /* Circular backdrop with the gradient ring + 24%-white fill. Rive canvas
     renders the glyph on top; the circle no longer lives inside the icon
     asset itself. */
  background-image: url('/lp/images/icon-back.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Placeholder treatment — applied to <div> icon slots before real assets land */
.features__icon--placeholder {
  background: var(--c-pink-placeholder);
  outline: 1px dashed var(--c-pink-outline);
  outline-offset: -1px;
  border-radius: 4px;
}

.features__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  color: var(--c-text);
  margin: 0 0 8px;
}

.features__desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-navy);
  margin: 0;
}

.features__desc strong {
  font-weight: 700;
  color: var(--c-text);
}

/* Per-row screen image. Renders inline below each feature's icon+body on
   both desktop AND mobile — the cursor-follow preview was retired in
   favor of static images so every screen is visible at a glance without
   the user needing to hover-discover. Hover still subtly highlights the
   icon circle (see .features__item:hover .features__icon below). */
.features__screen {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 554px;
  height: auto;
  margin-top: 18px;
}

@media (max-width: 860px) {
  .features__screen {
    margin-bottom: 30px;
  }
}

/* Cursor-follow shell retired — kept the DOM node + JS intact in case we
   want to bring it back, but hide unconditionally so it doesn't fire. */
.features-hover { display: none !important; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  /* Both selectors so this beats the desktop `.features--left .features__content`
     rule (specificity 0,2,0) on mobile. */
  .features__content,
  .features--left .features__content {
    grid-column: 1 / -1;
  }
  .features__heading {
    /* +4px on top of the previous bump (was 38–52) per design. */
    font-size: clamp(42px, 9vw, 56px);
  }
  /* Icon stacks ABOVE the title on mobile at 60×60. */
  .features__icon {
    display: block;
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
  }
  .features__item {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  /* Tighten the vertical rhythm on mobile — pulls the time section closer
     to the cloud-type above AND tightens the gap between the time and
     wellbeing sections. (.features--left's `padding-top: 0` still applies
     so wellbeing stays flush with the time section above it.) */
  .features {
    padding-block: clamp(40px, 7vh, 100px);
  }
  /* Hide the figure background images on mobile — they read poorly at small
     widths and compete with the column-of-rows layout. */
  .features::before { display: none; }
  /* Rive icon cluster tied to the figure — hide on mobile too. */
  .features__bg-icons-rive { display: none; }
}