/* The Experience: one loop, three times over. A chat on WhatsApp becomes a
   meeting in real life, and the meeting sharpens the profile. Used on the
   homepage, with experience-loop.js.

   Default (no JS, reduced motion, a viewport under 881px wide or 640px
   tall): the three captions read top to bottom as steps and the board
   shows the end state, three chats, three meetings, a full profile. Columns
   stack on phones and sit side by side from 641px.

   Enhanced (experience-loop.js ran and the viewport qualifies): the track
   is several viewports tall and wraps a sticky stage pinned under the site
   header, caption on the left, board on the right. The captions share one
   cell and scroll through it with depth (the outgoing one recedes upward
   and fades, the next rises from below), and the board fills in with the
   scroll position: messages, meetings and notes land one loop at a time,
   and the meters grow between the levels the markup carries.
   Every enhanced rule lives under the media query AND behind
   .xp.is-enhanced, so the stacked fallback is what renders otherwise.

   Inactive pieces are visually hidden only (opacity, transforms), never
   aria-hidden or visibility:hidden, so screen readers and find-in-page
   still get every caption and message in order. The layout is the same in
   both modes: the script only ever writes opacity, transform, width and
   the score figure, so nothing shifts when it takes over.

   Expects the site tokens (--brand, --brand-light, --brand-pale, --dark,
   --grey, --grey-strong, --grey-light, --grey-100, --white, --green-deep)
   from the page stylesheet. */

.xp {
  --sf-top: 72px; /* sticky header height; experience-loop.js measures it */
  --wa-green: #25D366;
  --wa-ink: #1DA851; /* the green at text weight: --wa-green is ~2:1 on paper */
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
}

.xp-stage {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* ── Captions ── */

.xp-captions {
  display: grid;
  gap: 1.5rem;
}

.xp-caption {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 44ch;
}

.xp-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--brand-light);
}

.xp-caption h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--dark);
  margin: 0;
}

.xp-caption p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--grey);
  margin: 0;
  text-wrap: pretty;
}

/* ── Board ── */

.xp-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.xp-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.xp-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-strong);
}

.xp-col-head svg {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}

.xp-col-chat .xp-col-head { color: var(--wa-ink); }
.xp-col-meet .xp-col-head { color: var(--brand); }

/* Between the columns: chat feeds meeting, meeting feeds profile. Drawn as
   a dotted rule with an arrowhead, in the same dashes the old wave used. On
   the stacked layout it turns 90 degrees and points down. */
.xp-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-light);
}

/* The mark, not the wrapper, carries the opacity and the pulse the script
   writes, so the two never compound. */
.xp-link i {
  position: relative;
  display: block;
  opacity: 0.55;
  width: 2px;
  height: 28px;
  background-image: linear-gradient(currentColor 50%, transparent 50%);
  background-size: 2px 8px;
}

.xp-link i::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

/* Chat: WhatsApp's own reading, a sand panel with white incoming bubbles
   and green outgoing ones, kept to the site's tones rather than its exact
   hex. */
.xp-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: #EFE9DF;
}

/* A contact strip at the top, so the panel still reads as a chat before
   the first message lands. The site's CSS logo mark, one size down. */
.xp-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.xp-chat-head .logo-mark {
  width: 24px;
  height: 24px;
}

.xp-chat-head .logo-circle,
.xp-chat-head .logo-circle-inner { border-width: 2px; }

.xp-chat-name {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--dark);
}

.xp-chat-name small {
  font-size: 11px;
  font-weight: 500;
  color: var(--grey-strong);
}

.xp-msg {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--dark);
  margin: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.xp-msg-in {
  align-self: flex-start;
  background: var(--white);
  border-top-left-radius: 4px;
}

.xp-msg-out {
  align-self: flex-end;
  background: #D9F7C5;
  border-top-right-radius: 4px;
}

/* Meetings: one card per meeting, in the site's white-card idiom. */
.xp-meets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xp-meet {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--grey-light);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.xp-meet-when {
  grid-column: 1;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--grey-strong);
}

.xp-meet-who {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--dark);
}

.xp-meet-tag {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 50px;
  color: var(--green-deep);
  background: var(--green-light);
}

.xp-meet-tag-next {
  color: var(--brand);
  background: var(--brand-pale);
}

/* Profile: the score, five of the eight match dimensions as meters (same
   colours as the pill row in the next section), and what each meeting
   taught. */
.xp-profile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: var(--grey-100);
}

.xp-score {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.xp-score-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grey-strong);
}

.xp-score-val {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.xp-meters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xp-meter {
  --tint: var(--brand-light);
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dark);
}

.xp-meter i {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: var(--grey-light);
  overflow: hidden;
}

.xp-meter b {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--tint);
}

.xp-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--grey-light);
  list-style: none;
}

.xp-note {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--grey-strong);
}

.xp-note::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
}

/* Columns side by side once there is room: chat | meetings | profile with
   the two links in the gaps, pointing right. */
@media (min-width: 641px) {
  .xp-board {
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.75rem;
  }

  /* Down from the column headers so the arrow sits level with the first
     row of content, not the labels. */
  .xp-link { padding-top: 3.25rem; }

  .xp-link i {
    width: 28px;
    height: 2px;
    background-image: linear-gradient(90deg, currentColor 50%, transparent 50%);
    background-size: 8px 2px;
  }

  .xp-link i::after {
    left: auto;
    right: -1px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}

@media (min-width: 881px) {
  /* Desktop without the enhancement: the captions become three columns of
     steps above the board. */
  .xp-captions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .xp-board { gap: 1.25rem; }

  /* Enhanced mode: pinned stage, cross-fading captions, board filled in by
     the script. Four and a bit viewports of track: a settle at each end and
     one viewport per loop, so each hand-over can be followed rather than
     flicked. */
  .xp.is-enhanced {
    height: 420vh;
    max-width: none;
  }

  /* Caption beside the board, in Lassie proportions: a modest heading over
     quiet body copy, so the board carries the section and the caption
     annotates it rather than heading it. */
  .xp.is-enhanced .xp-stage {
    position: sticky;
    top: var(--sf-top);
    height: calc(100vh - var(--sf-top));
    display: grid;
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: center;
    padding-bottom: 1.5rem;
  }

  .xp.is-enhanced .xp-captions {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
  }

  .xp.is-enhanced .xp-caption {
    grid-area: 1 / 1;
    align-items: flex-start;
    text-align: left;
    max-width: 30ch;
    transform-origin: 0 50%;
    will-change: transform, opacity, filter;
  }

  .xp.is-enhanced .xp-caption h3 {
    font-size: 1.5rem;
    line-height: 1.25;
  }

  .xp.is-enhanced .xp-caption p {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* The three columns close up: chat, meeting and profile are one chain,
     and the gaps only need room for the arrow. */
  .xp.is-enhanced .xp-board {
    grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.5rem;
  }

  .xp.is-enhanced .xp-link i { width: 20px; }

  /* Tighter chat so the panel stays level with the profile card. */
  .xp.is-enhanced .xp-chat { gap: 6px; }
  .xp.is-enhanced .xp-msg {
    max-width: 92%;
    font-size: 13px;
  }

  .xp.is-enhanced .xp-msg,
  .xp.is-enhanced .xp-meet,
  .xp.is-enhanced .xp-note {
    will-change: transform, opacity;
  }

  /* The bars grow on the script's clock, not the browser's, so scrolling
     back runs them down at the same rate they came up. */
  .xp.is-enhanced .xp-meter b { transition: none; }

  /* Short stages (a 720px laptop viewport leaves ~650px under the header):
     pull the caption and the board together and give the caption a little
     air under the header, so nothing rides against the edges. */
  @media (max-height: 800px) {
    .xp.is-enhanced .xp-stage {
      padding-top: 0.75rem;
      padding-bottom: 1rem;
    }
    .xp.is-enhanced .xp-caption { gap: 0.375rem; }
  }
}