/* /HUMAN — pinned scroll beat: a horizontal headline that fills char-by-char
   (gray → ink), with the brand-gradient slash. The glass thread plays below.
   Desktop only (>=981px); collapses to a static inked header on smaller screens. */
#experts.exp-stack { background: #fff; }
#experts.exp-stack .exp-after { padding-top: 0; }
.exp-runway { position: relative; }
.exp-pin { position: relative; }
.exp-stage {
  position: relative; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 6vw; min-height: 56vh;
}
/* the headline — char-split fill reveal (sauna-style), horizontal + centered */
.exp-bigtitle.bloat-h {
  margin: 0 auto; max-width: 1000px; color: var(--ink-900);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.12;
  font-size: clamp(34px, 4.4vw, 62px); text-wrap: balance;
}
.exp-bigtitle .w { display: inline-block; }
.exp-bigtitle .c { color: #C6CDD5; transition: color .24s ease; }
.exp-bigtitle .c.on { color: var(--ink-900); }
/* brand-gradient slash — page-wide */
.gslash {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-image: var(--brand-gradient); font-weight: 700;
}
.exp-bigtitle .gslash { opacity: .26; transition: opacity .3s ease; }
.exp-bigtitle .gslash.lit { opacity: 1; }

@media (min-width: 981px) {
  .exp-runway { height: 200vh; }
  .exp-pin { position: sticky; top: 0; height: 100vh; }
  .exp-stage { height: 100%; min-height: 0; }
  #experts.exp-stack .exp-after { margin-top: -4vh; padding-bottom: 8vh; }
}
@media (max-width: 980px) {
  .exp-runway { height: auto; }
  .exp-pin { position: static; height: auto; }
  .exp-stage { min-height: 0; padding: 48px 20px 10px; }
  .exp-bigtitle.bloat-h { font-size: clamp(28px, 8vw, 40px); }
  .exp-bigtitle .c { color: var(--ink-900); }
  .exp-bigtitle .gslash { opacity: 1; }
}
/* hero CTAs stack to one shared width on phones (matches the mobile build) */
@media (max-width: 600px) {
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ===== VS comparison polish ===== */
/* both sides share one avatar size (competitor logo matches the Minded disc) */
.vs-col .cg .a > img, .vs-col .cla .a > img, .vs-col .cop .a > img { width: 44px; height: 44px; }
/* drop the "Task done" verdict badges across every comparison */
.vs-col.win .verdict { display: none; }
/* claude reply — align the next-steps list and the code under the response text, with consistent type */
.cla .a.cont { padding-left: 52px; }
.cla .a.cont span { font-size: 15px; line-height: 1.6; }
.cla .ccode { margin-left: 52px; }

/* ===== Browser-window section — brand gradient accents ===== */
.bw-panes {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.18), transparent 62%),
    linear-gradient(135deg, #FFF9F5 0%, #FBF4F8 100%);
  border: none;
  box-shadow: none;
}
/* hero stage + recorder stage: no gradient card at any width — the browser
   window floats on the sky backdrop (the gradient panel reads as an extra card
   around the demo) */
.hero-demo .bw-panes, .rec-wrap .bw-panes { background: transparent; }
/* the Record tab's video icon picks up the brand gradient */
.bw-tab[data-bw="record"] > svg,
.bw-tab[data-bw="record"].active > svg { stroke: url(#brandIconGrad); }
/* Teams glyph fills only ~76% of its viewBox; the viewBox is cropped to the
   glyph, so size by height to match Slack's logo height (overrides the shared
   21px square in site-v3.css). */
.bw-tab[data-bw="teams"] > svg.bw-brand { width: auto; height: 21px; }

/* experts standalone + recorder section (page reorg) */
#experts { background: #fff; }
#experts .exp-standalone { display: flex; justify-content: center; margin-top: 6px; }
#experts .exp-card { width: min(560px, 94vw); height: min(600px, 78vh); }
#teach .rec-wrap .bwx-head { margin-bottom: 14px; max-width: 840px; }
/* headline wraps to exactly two lines: "by recording it" moves as one unbreakable
   group, so no rotor word can strand "it" on a third line */
#teach .rec-wrap h2.display .keep { white-space: nowrap; }