/* Nurture live scenes (brainstorm). Remove the two <link>/<script> tags for live.css and live.js to restore the original page. */

/* ---------- 1. The knot (problem section) ---------- */
#problem { overflow-x: clip; }
.mess.knot-live {
  aspect-ratio: auto; height: clamp(290px, 23vw, 340px);
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: 4px;
}
.mess.knot-live .cables { display: none; }
@media (max-width: 640px) {
  .mess.knot-live:not(.b2b-mess) { padding-top: 0; height: 420px; }
  .mess.knot-live:not(.b2b-mess) .chip, .mess.knot-live:not(.b2b-mess) .hub { left: 0 !important; top: 0 !important; }
  .mess.knot-live:not(.b2b-mess) .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px; }
}
.knot-ropes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.mess.knot-live .chip { left: 0; top: 0; transform: none; will-change: transform; }
.mess.knot-live .chip .ping {
  position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange); border: 2px solid var(--card); transform: scale(0);
}
.mess.knot-live .hub { left: 0; top: 0; transform: none; overflow: visible; will-change: transform; }
.knot-live .hub .face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; }
.knot-live .hub .face-core { opacity: 0; border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(201,162,74,.14), 0 0 44px -6px rgba(201,162,74,.55); }
.knot-live .hub .face-core b { font-size: 17px; }
.knot-live .hub .face-core span { color: var(--gold); }
.knot-you {
  position: absolute; left: 0; top: 0; z-index: 4; opacity: 0;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--card-grad); box-shadow: var(--card-shadow-sm); white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.knot-you i { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--green); }
.knot-you i svg { display: block; width: 26px; height: 26px; }
.mess.knot-live .cap { bottom: 6px; font-size: 14px; }
.knot-live .cap span { display: block; transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); }
.knot-live .cap .c2 { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(8px); color: var(--ink); }
.knot-live.resolved .cap .c1 { opacity: 0; transform: translateY(-8px); }
.knot-live.resolved .cap .c2 { opacity: 1; transform: none; }

/* ---------- 2. The leak line (strategy section) ---------- */
#strategy { overflow-x: clip; }
.leak { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(40px, 5vw, 64px); }
.leak-head {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.leak-copy { position: relative; flex: 1 1 420px; max-width: 640px; min-height: 3.3em; }
.leak-copy .lab { font-weight: 700; font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--orange); }
.leak-copy p {
  position: absolute; left: 0; right: 0; top: 22px; margin: 0;
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.25; color: var(--ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
}
.leak-copy p.on { opacity: 1; transform: none; }
.leak-copy p em { color: var(--orange); }
.leak-copy .sizer { visibility: hidden; position: static; opacity: 0; margin-top: 8px; }
.leak-modes {
  position: relative; display: inline-flex; padding: 4px; border-radius: 999px;
  background: rgba(15,30,21,.06); border: 1px solid var(--line-cream);
}
.leak-modes .pill {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 999px; background: var(--ink);
  transition: transform .42s cubic-bezier(.16,1,.3,1), width .42s cubic-bezier(.16,1,.3,1);
}
.leak-modes button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font: 600 13.5px/1 var(--sans); color: var(--muted); padding: 10px 16px; border-radius: 999px;
  transition: color .3s ease;
}
.leak-modes button[aria-pressed="true"] { color: var(--cream); }
.leak-modes button:hover:not([aria-pressed="true"]) { color: var(--ink); }
.leak-modes button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.leak-modes button:active { transform: scale(.97); }
.leak canvas { display: block; width: 100%; height: 250px; margin-top: 10px; }

/* ---------- 3. Four moves (how it works) ---------- */
.hiw-bullets.live { position: relative; padding-left: 30px; }
.hiw-rail { position: absolute; left: 6px; top: 22px; bottom: 30px; width: 2px; background: var(--line-cream); border-radius: 2px; }
.hiw-rail .fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, var(--gold), var(--orange)); transform-origin: top; transform: scaleY(0); border-radius: 2px; }
.hiw-rail .bead {
  position: absolute; left: -2px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  opacity: 0; animation: hiw-bead 2.4s linear infinite;
}
.hiw-rail .bead:nth-child(3) { animation-delay: .8s; }
.hiw-rail .bead:nth-child(4) { animation-delay: 1.6s; }
.hiw-rail.paused .bead { animation-play-state: paused; }
@keyframes hiw-bead {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .9; }
  85% { opacity: .9; }
  100% { transform: translateY(var(--rail-reach, 200px)); opacity: 0; }
}
.hiw-bullets.live li { position: relative; transition: opacity .45s cubic-bezier(.16,1,.3,1); opacity: .42; }
.hiw-bullets.live li.on { opacity: 1; }
.hiw-bullets.live li::before {
  content: ""; position: absolute; left: -29px; top: 19px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cream-alt); border: 2px solid var(--line-cream); box-sizing: border-box;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.hiw-bullets.live li.reached::before { background: var(--gold); border-color: var(--gold); }
.hiw-bullets.live li.on::before { transform: scale(1.25); box-shadow: 0 0 0 5px rgba(201,162,74,.22); }
.cluster.live .c { transition: scale .5s cubic-bezier(.16,1,.3,1); }
.cluster.live .c > * { transition: filter .5s ease; }
.cluster.live.focus-0 .c:not(.c-tablet), .cluster.live.focus-1 .c:not(.c-laptop), .cluster.live.focus-2 .c:not(.c-phone) { scale: .97; }
.cluster.live.focus-0 .c:not(.c-tablet) > *, .cluster.live.focus-1 .c:not(.c-laptop) > *, .cluster.live.focus-2 .c:not(.c-phone) > * { filter: saturate(.15) brightness(1.07) contrast(.82); }
.cluster.live.focus-0 .c-tablet, .cluster.live.focus-1 .c-laptop, .cluster.live.focus-2 .c-phone { scale: 1.03; }
/* The toast lands on the phone like a push notification, overhanging to the left, at every width. */
.cluster.live .c-phone { overflow: visible; }
.hiw-toast {
  position: absolute; right: -4%; top: 16%; z-index: 5; width: max-content; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--card-grad); box-shadow: var(--card-shadow);
  opacity: 0; transform: translateY(16px) scale(.98);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.cluster.live.focus-3 .hiw-toast { opacity: 1; transform: none; }
.hiw-toast .tick { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); }
.hiw-toast b { display: block; font-size: 14.5px; color: var(--ink); }
.hiw-toast span { display: block; font-size: 12.5px; color: var(--muted); }
@media (max-width: 960px) { .cluster.live .c-phone { position: relative; } .hiw-toast { right: 4%; top: 10%; padding: 10px 14px 10px 10px; } .hiw-toast .tick { width: 30px; height: 30px; } }

@media (prefers-reduced-motion: reduce) {
  .leak-copy p, .leak-modes .pill, .hiw-bullets.live li, .cluster.live .c, .cluster.live .c > *, .hiw-toast, .knot-live .cap span { transition-duration: 1ms; }
  .hiw-rail .bead { display: none; }
}