/* ============================================================
   SECTION 6  -  BETWEEN YOUR MESSAGES              redesign preview

   It stops describing the conversation and shows it. The right half is
   the companion's own face. As of 2026-08-27 the exchange is Mike's:
   Whispr on Thursday asking about the appointment she mentioned. Thursday
   only reads because Tuesday happened - the visitor infers the memory,
   which lands harder than any sentence claiming it.

   Built from the page's own vocabulary - night ground, ember band, cream
   Fraunces - not a borrowed chat interface. Deck slide 24 bars wearing
   another product's UI, so nothing here resembles a phone.
   ============================================================ */

#companion{
  background:var(--night); color:var(--on-night);
  padding-block:clamp(54px,7vw,104px);
  position:relative; isolation:isolate; overflow:hidden;
}
/* a single ember bloom, off to the device side, so the dark has depth */
#companion::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-8%; top:34%; width:min(760px,70%); height:min(760px,120%);
  transform:translateY(-50%);
  background:radial-gradient(closest-side,
    rgba(56,182,255,.16), rgba(56,182,255,.05) 55%, transparent 72%);
}
#companion .wrap{position:relative; z-index:1}

#companion .cmp__grid{
  display:grid; gap:clamp(30px,4vw,64px); align-items:center;
}
@media (min-width:880px){
  #companion .cmp__grid{grid-template-columns:1fr 1fr}
}

/* ---------- the words ---------- */
#companion .cmp__col{max-width:480px}
#companion .eyebrow{color:var(--ember-lit)}
#companion h2{
  margin:10px 0 0; color:var(--on-night);
  font-size:clamp(30px,3.6vw,48px); line-height:1.04; letter-spacing:-.024em;
}
#companion h2 .cmp-h2a,#companion h2 .lit{display:block}
#companion h2 .lit{color:var(--ember-hot); font-style:italic;
  font-variation-settings:"SOFT" 60,"WONK" 1;}
#companion .cmp__p{
  margin:18px 0 0; max-width:440px;
  font-size:16px; line-height:1.62; color:var(--on-night-2);
}
#companion .cmp__p--lead{
  margin-top:22px; font-family:var(--display); font-style:italic;
  font-size:clamp(21px,2.2vw,27px); line-height:1.1; color:var(--on-night);
}
#companion .cmp__p--sub{margin-top:8px}

/* ---------- the device face ---------- */
#companion .cmp__demo{
  justify-self:center; width:min(420px,100%);
  display:flex; flex-direction:column; gap:20px;
}
#companion .cmp__device{
  position:relative; height:74px; border-radius:18px;
  background:linear-gradient(160deg,#12324f,#0a2138);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 20px 40px -24px rgba(0,0,0,.8);
  display:flex; align-items:center; justify-content:center;
}
#companion .cmp__band{
  position:absolute; left:14px; right:14px; top:50%; height:18px;
  transform:translateY(-50%); border-radius:4px;
  background:linear-gradient(90deg,
    rgba(56,182,255,0), var(--ember) 22%, var(--ember-lit) 50%, var(--ember) 78%, rgba(56,182,255,0));
  filter:blur(.3px);
  box-shadow:0 0 26px 3px rgba(56,182,255,.55);
  animation:cmpPulse 3.6s ease-in-out infinite;
}
@keyframes cmpPulse{0%,100%{opacity:.72}50%{opacity:1}}
#companion .cmp__mark{
  position:relative; z-index:1; font-family:var(--display);
  font-size:15px; letter-spacing:.03em; font-weight:600;
  /* solid navy at a fixed opacity, NOT mix-blend-mode. Blend modes render
     differently on every display - the reason one person saw the wordmark
     and another did not. This reads the same everywhere. */
  color:rgba(4,20,43,.62);
  text-shadow:0 1px 0 rgba(255,255,255,.18);
}

/* ---------- the thread ---------- */
#companion .cmp__thread{display:flex; flex-direction:column; gap:10px}
#companion .cmp__day{
  margin:2px 0 2px; font-family:var(--ui); font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
#companion .cmp__day--gap{margin-top:16px}
#companion .cmp__day--gap span{
  margin-left:10px; font-weight:500; letter-spacing:.02em;
  text-transform:none; color:var(--ember-lit);
}
#companion .cmp__say{
  padding:13px 16px; border-radius:16px; max-width:88%;
  font-size:15.5px; line-height:1.4; color:var(--on-night);
  font-family:var(--display);
}
#companion .cmp__who{
  display:block; font-family:var(--ui); font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px;
  color:var(--on-night-2);
}
/* the person: a plain slab, left */
#companion .cmp__say--her{
  align-self:flex-start;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
/* the companion: ember-lit, right, so its voice is the coloured one */
#companion .cmp__say--it{
  align-self:flex-end; text-align:left;
  background:linear-gradient(160deg, rgba(56,182,255,.20), rgba(56,182,255,.09));
  border:1px solid rgba(122,204,255,.34);
}
/* The bubble is align-self:flex-end but its contents stay text-align:left so
   the quote reads normally. That left the speaker label pinned to the far
   left of a right-hand bubble, which reads as belonging to the wrong side.
   The label alone goes right; the words it introduces do not. */
#companion .cmp__say--it .cmp__who{color:var(--ember-lit); text-align:right}
/* the payoff line gets a soft glow so the eye lands on it */
#companion .cmp__say--pop{
  box-shadow:0 0 0 1px rgba(122,204,255,.30), 0 12px 30px -14px rgba(56,182,255,.5);
}

html.no-js #companion .rv,.rv-force #companion .rv{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  #companion .cmp__band{animation:none}
}