/* ============================================================
   ScolerAI Marketing — AI Study Coach hero demo + hub section
   (marketing.html only)

   The hero recreates a real coach conversation — topic, two
   sharp questions, one proposal, then the plan card the coach
   built. Without JS (or with reduced motion) the whole
   conversation is visible statically; js/coach-demo.js arms it
   and replays it like a live chat.
   ============================================================ */

/* ── Hero chat demo card ── */
/* Extra bottom padding reserves room for the planner mini-card, so it
   never covers the transcript, the foot note, or the pillars strip. */
.hero__mockup--coach{width:min(100%,27.5rem);padding-bottom:3.5rem}
/* The chat card is taller than the old dashboard panel, so the floating
   mini-cards sit above the header bar and below the card instead of
   covering the conversation itself. */
.hero__mockup--coach .hero__mini-card--progress{top:-2.1rem;right:-1.6rem;max-width:11.5rem}
.hero__mockup--coach .hero__mini-card--planner{bottom:0;left:-1.6rem;max-width:16.5rem}
@media(max-width:1100px){
  .hero__mockup--coach .hero__mini-card--progress{right:-.4rem}
  .hero__mockup--coach .hero__mini-card--planner{left:-.4rem}
}
@media(max-width:900px){
  .hero__mockup--coach{padding-bottom:1.25rem}
  .hero__mockup--coach .hero__mini-card--planner{position:relative;top:auto;left:auto;bottom:auto;max-width:none;width:100%;margin-top:.75rem}
}

.coach-demo{position:relative;z-index:2;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(243,240,255,.92));border:1px solid rgba(17,24,39,.06);border-radius:28px;box-shadow:var(--sh-xl),var(--sh-glow);backdrop-filter:blur(14px);overflow:hidden}

.coach-demo__bar{display:flex;align-items:center;gap:.625rem;padding:.8rem 1rem;border-bottom:1px solid rgba(17,24,39,.06);background:rgba(255,255,255,.72)}
.coach-demo__avatar{width:34px;height:34px;border-radius:50%;background:var(--grad-cta);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.coach-demo__avatar i{width:17px;height:17px}
.coach-demo__who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.coach-demo__who strong{font-size:.875rem;color:var(--text-1)}
.coach-demo__status{display:inline-flex;align-items:center;gap:.3rem;font-size:.6875rem;color:var(--text-3)}
.coach-demo__status-dot{width:6px;height:6px;border-radius:50%;background:var(--c-green-l);animation:coachStatusDot 2s infinite}
@keyframes coachStatusDot{0%,100%{opacity:1}50%{opacity:.35}}
.coach-demo__mic{margin-left:auto;width:30px;height:30px;border-radius:50%;background:rgba(124,58,237,.08);color:var(--c-purple);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.coach-demo__mic i{width:15px;height:15px}

.coach-demo__log{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1rem 1.1rem}
.coach-demo__msg{max-width:88%;padding:.55rem .85rem;font-size:.8125rem;line-height:1.5;border-radius:16px;margin:0}
.coach-demo__msg--coach{align-self:flex-start;background:#F3F4F6;color:var(--text-1);border-bottom-left-radius:6px}
.coach-demo__msg--user{align-self:flex-end;background:var(--grad-cta);color:#fff;border-bottom-right-radius:6px}

/* "Building your plan…" chip — always occupies its row (only its opacity
   toggles) so the animation never shifts the layout under the card. */
.coach-demo__typing{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;padding:.45rem .8rem;border-radius:16px;border-bottom-left-radius:6px;background:#F3F4F6;font-size:.75rem;color:var(--text-3);opacity:0;transition:opacity .3s var(--ease)}
.coach-demo__typing.is-on{opacity:1}
.coach-demo__typing-dots{display:inline-flex;gap:3px}
.coach-demo__typing-dots i{width:5px;height:5px;border-radius:50%;background:var(--text-3);animation:coachTypingDot 1s infinite}
.coach-demo__typing-dots i:nth-child(2){animation-delay:.15s}
.coach-demo__typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes coachTypingDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}

.coach-demo__card{display:flex;align-items:center;gap:.7rem;margin-top:.3rem;padding:.8rem .9rem;background:linear-gradient(135deg,rgba(124,58,237,.07),rgba(37,99,235,.06));border:1px solid rgba(124,58,237,.28);border-radius:16px;box-shadow:0 6px 20px rgba(124,58,237,.14)}
.coach-demo__card-icon{width:34px;height:34px;border-radius:12px;background:var(--grad-cta);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.coach-demo__card-icon i{width:16px;height:16px}
.coach-demo__card-text{display:flex;flex-direction:column;min-width:0}
.coach-demo__card-eyebrow{font-size:.6rem;font-weight:800;letter-spacing:.1em;color:var(--c-purple)}
.coach-demo__card-title{font-size:.845rem;color:var(--text-1);line-height:1.3}
.coach-demo__card-desc{font-size:.72rem;color:var(--text-2);margin-top:.1rem}
.coach-demo__card-chev{width:16px;height:16px;color:var(--c-purple);margin-left:auto;flex-shrink:0}

.coach-demo__foot{margin:.3rem 0 0;text-align:center;font-size:.72rem;color:var(--text-3)}

.coach-demo__replay{align-self:flex-end;display:inline-flex;align-items:center;gap:.35rem;margin:0 1rem .85rem 0;padding:.3rem .8rem;border-radius:var(--r-full);font-size:.72rem;font-weight:600;color:var(--c-purple);background:rgba(124,58,237,.07);transition:background .2s var(--ease)}
.coach-demo__replay:hover{background:rgba(124,58,237,.14)}
.coach-demo__replay i{width:13px;height:13px}
.coach-demo__replay[hidden]{display:none}

/* Armed by coach-demo.js: hide the beats, reveal them one by one.
   Space stays reserved (opacity/transform only) — zero layout shift. */
.coach-demo--armed .coach-demo__msg,
.coach-demo--armed .coach-demo__foot{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.coach-demo--armed .coach-demo__card{opacity:0;transform:translateY(12px) scale(.95);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.coach-demo--armed .coach-demo__msg.is-in,
.coach-demo--armed .coach-demo__card.is-in,
.coach-demo--armed .coach-demo__foot.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .coach-demo__status-dot,.coach-demo__typing-dots i{animation:none}
  .coach-demo__typing{display:none}
}

@media(max-width:640px){
  .coach-demo__msg{max-width:94%}
}

/* ── Coach hub section ("one conversation away from every tool") ── */
.coach-hub{background:linear-gradient(180deg,#F3F0FF 0%,var(--bg) 100%)}
.coach-hub__viz{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.05fr) auto minmax(0,1.4fr);align-items:center;gap:1.25rem;max-width:1080px;margin:0 auto}

.coach-hub__say{background:var(--surface);border:1px solid var(--border-l);border-radius:var(--r-xl);padding:1.1rem 1.2rem;box-shadow:var(--sh-sm)}
.coach-hub__label{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:.45rem}
.coach-hub__quote{font-size:.9375rem;color:var(--text-1);font-style:italic;line-height:1.55;margin:0}

.coach-hub__flow{display:flex;align-items:center;justify-content:center;color:var(--c-purple);opacity:.55}
.coach-hub__flow i{width:22px;height:22px}

.coach-hub__node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;padding:1.6rem 1.2rem;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(243,240,255,.9));border:1px solid rgba(124,58,237,.22);border-radius:var(--r-2xl);box-shadow:var(--sh-lg),0 0 44px rgba(124,58,237,.12)}
.coach-hub__node-icon{position:relative;width:52px;height:52px;border-radius:50%;background:var(--grad-cta);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.coach-hub__node-icon i{width:24px;height:24px}
.coach-hub__node-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(124,58,237,.35);animation:coachHubRing 2.4s var(--ease) infinite}
@keyframes coachHubRing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
.coach-hub__node strong{font-size:1rem;color:var(--text-1)}
.coach-hub__node-sub{font-size:.75rem;color:var(--text-3)}

.coach-hub__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.coach-hub__chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-full);font-size:.8125rem;font-weight:600;color:var(--text-2);transition:all .2s var(--ease)}
.coach-hub__chip:hover{border-color:var(--c-purple);color:var(--c-purple);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.coach-hub__chip i{width:15px;height:15px;color:var(--c-purple);flex-shrink:0}

.coach-hub__caption{max-width:660px;margin:2.25rem auto 0;text-align:center;font-size:.9375rem;color:var(--text-2);line-height:1.65}

@media (prefers-reduced-motion: reduce){
  .coach-hub__node-ring{animation:none;opacity:0}
}

@media(max-width:900px){
  .coach-hub__viz{grid-template-columns:1fr;gap:.9rem;max-width:480px}
  .coach-hub__flow i{transform:rotate(90deg)}
  .coach-hub__say,.coach-hub__tools{text-align:center}
  .coach-hub__chips{justify-content:center}
}