/* ══════════════════════════════════════════════════════════════
   SECTION 2 — SYSTEM STATEMENT ("climb over hero" surface)
   The .story band is the ONLY scrolling-surface on the page. It wraps
   just the word-reveal, rises OVER the hero (rounded top + negative
   margin), and is FULLY OPAQUE so it hides the sticky hero during the
   climb (no ghosting). Its solid bottom (#C79FDF) equals the flat
   page-bg the bg-tween sets here, so when it scrolls away the fixed bg
   takes over seamlessly. Everything below (autopilot onward) is
   transparent content on that now-pinned background — no more
   scrolling surfaces, so no more seams.
   ══════════════════════════════════════════════════════════════ */
.story {
  position: relative;
  z-index: 1;
  margin-top: -44px;                       /* overlap the hero */
  border-radius: 44px 44px 0 0;            /* rounded top corners */
  /* Ends on the pink-lavender the fixed mesh shows at the handoff (its top
     band blends u_pink/u_lav over the violet floor), so .story's opaque
     bottom meets the mesh at near-matching colour — no hard seam. Kept
     opaque to keep hiding the sticky hero during the climb. */
  background: linear-gradient(180deg,
    #F2A6A0 0%, #EFB1AE 28%, #E9AEC0 56%, #D7AEE4 84%, #D9B4E8 100%);
  /* No `overflow: hidden` — it would break the sticky word-reveal pin. */
}

/* — System statement: word-by-word scroll reveal (js/word-reveal.js) —
   Tall track; the text pins (sticky) centred while you scroll through. */
.system {
  height: 240vh;                           /* scroll distance of the reveal */
  position: relative;
}
.system-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}
.system-text {
  max-width: 18ch;
  font-size: clamp(38px, 6.2vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.system-text .word {
  display: inline-block;
  opacity: 0.22;                           /* dim → full as scroll reaches it */
  transition: opacity 0.12s linear;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .system { height: auto; }
  .system-sticky { position: static; height: auto; padding: clamp(90px,14vh,170px) 24px clamp(60px,9vh,120px); }
  .system-text .word { opacity: 1; }
}

/* — Autopilot row: copy left, floating phone right.
   Transparent content on the fixed page-bg. Vertical padding only;
   .wrap supplies the horizontal padding + max-width. */
.autopilot {
  position: relative;
  padding-block: clamp(60px, 10vh, 140px) clamp(90px, 14vh, 180px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
/* Soft shadow-into-mesh at the seam. This sits at .autopilot's top edge —
   exactly where the scrolling .story band ends — so it tracks the handoff as
   you scroll (a fixed overlay can't, since the seam moves). Starts in .story's
   end-colour and fades to the live mesh, dissolving the hard line. Full-bleed
   (negative inline insets) so it ignores the .wrap padding. */
.autopilot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 220px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    #D9B4E8 0%, rgba(217,180,232,0.5) 42%, rgba(217,180,232,0) 100%);
  pointer-events: none;
  z-index: -1;
}
.autopilot-copy { max-width: 38ch; }
.autopilot-title {
  max-width: 15ch;                         /* ~3 fuller lines */
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.autopilot-lede {
  margin-top: 22px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  color: #ffffff;
}
.autopilot-body {
  margin-top: 16px;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  max-width: 32ch;
}

/* — Floating phone + a SEPARATE elliptical elevation shadow — */
.phone-float {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* The <picture> wrapper carries the width + centering; the img fills it.
   Sizing the img directly off a shrink-wrapping inline <picture> made it
   lean off-centre. */
.phone-float picture {
  position: relative;
  z-index: 1;
  display: block;
  width: min(78%, 300px);
}
.phone-float picture img {
  display: block;
  width: 100%;
}
.phone-shadow {
  position: absolute;
  left: 50%;
  bottom: -58px;
  width: 80%;
  height: 60px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(55,25,70,0.50) 0%, rgba(55,25,70,0.24) 44%, rgba(55,25,70,0) 75%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}