.story-b { position: relative; background: var(--dark); color: var(--on-dark); }
.stage-b { display: grid; padding: 40px 0 56px; }
.beat { display: grid; gap: 22px; padding: 48px var(--pad) 0; }
.bw small { display: block; font-size: 14px; font-weight: 500; color: var(--on-dark-2); margin-bottom: 10px; }
.bw { container-type: inline-size; }
.bw h2, .bw h3 { font-weight: 600; font-size: min(clamp(44px, 13vw, 132px), calc(100cqi / (var(--len, 8) * 0.6))); line-height: 0.95; letter-spacing: -0.045em; }
.bw p { font-size: 17px; color: var(--on-dark-2); margin-top: 14px; max-width: 34ch; }
.bw small em { font-style: normal; font-weight: 600; color: var(--on-dark); }
.bw.is-key small em { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--acc-soft); color: var(--acc-ink); }
.bp { --pan: 0em; --fit: 1; position: relative; height: 62svh; min-height: 420px; border-radius: 24px; overflow: hidden; background: var(--cp); }
.bp .m { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--sb)); font-size: min(calc((100vw - 2 * var(--pad)) / 44), calc((62svh - 40px) / 66)); }
.bp-web { --cp: var(--p-web); --sb: 0.62; }
.bp-bot { --cp: var(--p-bot); --sb: 1; }
.bp-pay { --cp: var(--p-pay); --sb: 1.1; }
.bp-app { --cp: var(--p-app); --sb: 1; }
.bp-club { --cp: var(--p-club); --sb: 1; }
.bp-crm { --cp: var(--p-crm); --sb: 0.62; }
.bp-dash { --cp: var(--p-dash); --sb: 0.78; }

@media (min-width: 1100px) {
  .beat { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; min-height: 100svh; padding-top: 24px; }
  .bp { height: calc(100svh - var(--bar-h) - 40px); }
  .bp .m { font-size: min(calc((50vw - 2 * var(--pad)) / 72), calc((100svh - var(--bar-h) - 80px) / 66)); }
  .bp-web { --sb: 1; }
  .bp-crm { --sb: 1; }
  .bp-dash { --sb: 1.1; }
  .bp-pay { --sb: 1.3; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story-b { height: 730svh; view-timeline: --storyb block; }
    .stage-b { position: sticky; top: 0; height: 100svh; overflow: hidden; grid-template-areas: "w" "p"; grid-template-rows: auto 1fr; gap: 18px; padding: calc(var(--bar-h) + 6px) var(--pad) calc(var(--pad) + var(--rail-h)); }
    .beat { display: contents; }
    .bw { grid-area: w; }
    .bp { grid-area: p; height: auto; min-height: 0; }
    .bp .m { font-size: min(calc((100vw - 2 * var(--pad)) / 44), calc((100svh - var(--bar-h) - 220px - var(--rail-h)) / 66)); }
    .bw, .bp, .bp .m { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --storyb; animation-range: contain var(--a) contain var(--b); }
    .bw { animation-name: b-cap; }
    .bw.first { animation-name: b-cap-first; }
    .bw.last { animation-name: b-cap-last; }
    .bp { animation-name: b-wipe; animation-range: contain var(--a) contain var(--w); }
    .bp.first { animation-name: none; }
    .bp .m { animation-name: b-in-out; }
    .bp.first .m { animation-name: b-out; }
    .bp.last .m { animation-name: b-in; }
  }
}

@media (min-width: 1100px) {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .stage-b { grid-template-areas: "w p"; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: center; column-gap: 40px; padding-bottom: calc(20px + var(--rail-h)); }
      .bp { align-self: stretch; }
      .bp .m { font-size: min(calc((50vw - 2 * var(--pad)) / 72), calc((100svh - var(--bar-h) - 80px - var(--rail-h)) / 66)); }
    }
  }
}

@keyframes b-wipe { 0% { transform: translateY(100svh); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } 100% { transform: translateY(0); } }
@keyframes b-in-out {
  0% { transform: translate(-50%, -50%) translateY(70svh) scale(var(--sb)) rotate(6deg); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  24% { transform: translate(-50%, -50%) scale(var(--sb)); }
  76% { transform: translate(-50%, -50%) scale(var(--sb)); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100% { transform: translate(-50%, -50%) translateY(-24svh) scale(calc(var(--sb) * 0.9)); }
}
@keyframes b-out { 0%, 70% { transform: translate(-50%, -50%) scale(var(--sb)); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } 100% { transform: translate(-50%, -50%) translateY(-24svh) scale(calc(var(--sb) * 0.9)); } }
@keyframes b-in { 0% { transform: translate(-50%, -50%) translateY(70svh) scale(var(--sb)) rotate(6deg); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } 30%, 100% { transform: translate(-50%, -50%) scale(var(--sb)); } }
@keyframes b-cap { 0% { opacity: 0; transform: translateY(0.6em); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-0.6em); } }
@keyframes b-cap-first { 0%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-0.6em); } }
@keyframes b-cap-last { 0% { opacity: 0; transform: translateY(0.6em); } 12%, 100% { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story-b :is(.msgs > *, .who em, .kb .is-picked, .wid-btn .done, .wid-seat .roll-in, .wid-seat .bar-t i, .pay-btn .done, .ring .val, .ring .roll-in, .reacts .roll-in, .newc, .mover, .chart .cover, .bar-t i, .keep) { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --storyb; }
    .story-b .b1 { animation-name: a-pop; animation-range: contain 16.2% contain 16.9%; }
    .story-b .b2 { animation-name: a-pop; animation-range: contain 17.3% contain 18%; }
    .story-b .b3 { animation-name: a-pop; animation-range: contain 18% contain 18.6%; }
    .story-b .kb .is-picked { animation-name: a-pick; animation-range: contain 18.8% contain 19.2%; }
    .story-b .b4 { animation-name: a-pop; animation-range: contain 19.3% contain 20%; }
    .story-b .b6 { animation-name: a-pop; animation-range: contain 21% contain 22%; }
    .story-b .who .typing { animation-name: a-on, a-on; animation-fill-mode: none; animation-range: contain 15.4% contain 16.2%, contain 20% contain 21%; }
    .story-b .who .bot-l { animation-name: a-off, a-off; animation-fill-mode: none; animation-range: contain 15.4% contain 16.2%, contain 20% contain 21%; }
    .story-b .wid-seat .roll-in { animation-name: a-roll; animation-range: contain 22.4% contain 23%; }
    .story-b .wid-seat .bar-t i { animation-name: a-seat; animation-range: contain 22.4% contain 23%; }
    .story-b .wid-btn .done { animation-name: a-on-stay; animation-range: contain 23.8% contain 24.6%; }
    .story-b .pay-btn .done { animation-name: a-on-stay; animation-range: contain 33.4% contain 34.4%; }
    .story-b .ring .val { animation-name: a-ring; animation-range: contain 46% contain 49%; }
    .story-b .ring .roll-in { animation-name: a-roll; animation-range: contain 47.6% contain 48.3%; }
    .story-b .c1 { animation-name: a-pop; animation-range: contain 59.4% contain 60.4%; }
    .story-b .reacts .roll-in { animation-name: a-roll; animation-range: contain 61.6% contain 62.3%; }
    .story-b .c2 { animation-name: a-pop; animation-range: contain 63.2% contain 64.2%; }
    .story-b .mover { animation-name: a-crm; animation-range: contain 73.8% contain 81%; }
    .story-b .newc { animation-name: a-pop; animation-range: contain 75.4% contain 76.4%; }
    .story-b .chart .cover { animation-name: a-reveal; animation-range: contain 88.6% contain 92.4%; }
    .story-b .bar-t i { animation-name: a-grow; animation-range: contain 89.2% contain 92.4%; }
    .story-b .keep { animation-name: a-pop; animation-range: contain 92.8% contain 93.8%; }
  }
}
@keyframes a-pop { 0% { opacity: 0; transform: translateY(0.8em) scale(0.97); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); } 100% { opacity: 1; transform: none; } }
@keyframes a-pick { 0% { background-color: var(--surface); color: var(--acc-ink); } 100% { background-color: var(--acc-strong); color: var(--on-acc); } }
@keyframes a-on { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes a-off { 0% { opacity: 1; } 12%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes a-on-stay { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes a-ring { 0% { stroke-dashoffset: var(--r0, 179); } 100% { stroke-dashoffset: var(--r1, 159); } }
@keyframes a-roll { 0% { transform: translateY(0); } 100% { transform: translateY(-1em); } }
@keyframes a-seat { 0% { transform: scaleX(0.6); } 100% { transform: scaleX(0.55); } }
@keyframes a-crm { 0%, 12% { transform: translateX(0); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } 38%, 58% { transform: translateX(calc(100% + 3em)); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } 86%, 100% { transform: translateX(calc(2 * (100% + 3em))); } }
@keyframes a-reveal { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes a-grow { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

@media (min-width: 600px) and (max-width: 1099px) {
  .bp-web { --sb: 0.9; }
  .bp-crm { --sb: 0.85; }
  .bp-dash { --sb: 1.05; }
  .bp-pay { --sb: 1.4; }
  .bp-bot, .bp-app, .bp-club { --sb: 0.88; }
}
@media (min-width: 1100px) {
  .bp-web { --sb: 1.1; }
  .bp-dash { --sb: 1.2; }
  .bp-pay { --sb: 1.55; }
  .bp :is(.m-bot, .m-app, .m-club) { font-size: min(calc((100svh - var(--bar-h) - 26px - var(--rail-h)) * 0.0136), calc((50vw - 1.5 * var(--pad)) * 0.027)); }
  .beat.alt > .bw { grid-column: 2; grid-row: 1; }
  .beat.alt > .bp { grid-column: 1; grid-row: 1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bp { animation-name: b-wipe, b-leave; animation-range: contain var(--a) contain var(--w), contain calc(var(--b) - 4%) contain var(--b); animation-fill-mode: both, forwards; }
    .bp.first { animation-name: none, b-leave; }
    .bp.last { animation-name: b-wipe; animation-range: contain var(--a) contain var(--w); animation-fill-mode: both; }
    .story-b :is(.m-web > .win, .m-crm > .crm, .m-dash > .dash) { animation: b-pan linear both; animation-timeline: --storyb; }
    .story-b .m-web > .win { animation-range: contain 1% contain 9%; }
    .story-b .m-crm > .crm { animation-range: contain 75% contain 81.5%; }
    .story-b .m-dash > .dash { animation-range: contain 90% contain 97%; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 599px) {
    .bp-web { --sb: 1; --pan: 9.5em; --fit: 0.62; }
    .bp-crm { --sb: 1; --pan: 13.5em; --fit: 0.62; }
    .bp-dash { --sb: 1.1; --pan: 8.5em; --fit: 0.71; }
    .bp-web, .bp-crm, .bp-dash { align-self: center; height: min(100%, calc(0.95 * (100vw - 2 * var(--pad)) + 48px)); }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1100px) {
    .beat.alt > .bw { grid-area: p; }
    .beat.alt > .bp { grid-area: w; }
    .bp-web { --sb: 1.55; --pan: 7.25em; --fit: 0.72; }
    .bp-crm { --sb: 1.4; --pan: 8.7em; --fit: 0.72; }
    .bp-dash { --sb: 1.7; --pan: 6.4em; --fit: 0.73; }
  }
}
@keyframes b-pan {
  0% { transform: translateX(var(--pan)); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  60% { transform: translateX(calc(-1 * var(--pan))); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100% { transform: translateX(0) scale(var(--fit)); }
}
@keyframes b-leave { 0% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); } 100% { opacity: 0; transform: translateY(-8%); } }