/* Version B (2026-10-15): built from all of Victor's notes so far. Loaded after v3.css, full-width.css and docs.css.
   - The hero video first (as in every version), then a top section with five words and the button.
   - "From this, to this": the five kinds as a scroll story, each shown as the document it replaces next to the video it
     becomes (sales email to Personal Demo, release notes to Launch Video, text post to Social Short, help article to
     How-To Clip, training manual to Team Training). The picture stays pinned on the left while the kinds scroll past
     on the right; the one in the middle is lit and its video plays. Phone-format video is shown as a phone.
   - Videos are trimmed copies without the green title card (videos/cut/), so they start on the app. */
.hero-b { text-align: center; padding-top: clamp(80px, 11vw, 170px); padding-bottom: clamp(80px, 11vw, 170px); }
.hero-b h1 { font-size: clamp(48px, 8vw, 128px); line-height: .98; letter-spacing: -.05em; }
.hero-b h1 span { display: block; background: linear-gradient(90deg, #2531d9, #6f7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-b .btn-lg { margin-top: clamp(30px, 3.4vw, 46px); padding: 19px 38px; font-size: 20px; border-radius: 12px; }

.story-b { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.bstage { position: sticky; top: calc(50vh - min(15vw, 230px)); display: grid; }
.bstage .slide { grid-area: 1 / 1; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .5s ease; }
.bstage .slide.on { opacity: 1; transform: none; }
.bstage .dots { grid-area: 2 / 1; display: flex; justify-content: center; gap: 8px; margin-top: 46px; }
.bstage .dots i { width: 8px; height: 8px; border-radius: 99px; background: #c9cbe6; transition: width .3s, background-color .3s; }
.bstage .dots i.on { width: 26px; background: var(--blue); }
.bstage .after.phone { width: min(230px, 100%); }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s ease; }
.step.on { opacity: 1; }
.step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 6vh; }
.step:last-child { min-height: 56vh; }
.m-pair { display: none; }
.step .tag { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.step h3 { margin-top: 10px; color: var(--ink); font-size: clamp(30px, 3.2vw, 48px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
.step > p:not(.tag):not(.price) { margin-top: 12px; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); max-width: 26em; }
.step .price { margin-top: 24px; padding: 10px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 14px; width: fit-content; }
.step .price b { display: block; color: var(--blue); font-size: 19px; }

@media (max-width: 900px) {
  .story-b { grid-template-columns: 1fr; }
  .bstage { display: none; }
  .step, .step:first-child, .step:last-child { min-height: 0; opacity: 1; padding: 0 0 60px; }
  .m-pair { display: block; margin-bottom: 30px; }
  .m-pair .after .vctl { top: 14px; right: 14px; }
}

/* 2026-10-21 (Victor): the heading of the five kinds is centred, with no line under it; the "g" of "doing" was cut off
   at the bottom (the gradient text is clipped to its line box), so the line gets a little room below. */
.head-c { justify-content: center; text-align: center; }
.hero-b h1 span { padding-bottom: .12em; margin-bottom: -.12em; }