/* Original Board palette and product UI, with the supplied video's scroll structure. */
.page-shell { overflow: clip; }
.hero.scroll-story { --story-vh: 100svh; position: relative; width: 100%; max-width: none; margin: 0; padding: 0; height: calc(var(--story-vh) * 4.55); overflow: visible; }
.story-pin { position: sticky; top: 0; width: 100%; height: var(--story-vh); overflow: hidden; isolation: isolate; }
.story-copy { position: absolute; z-index: 5; top: 46%; left: 50%; width: min(860px, calc(100% - 80px)); transform: translate(-50%, -50%) translateY(var(--copy-lift, 0px)) scale(var(--copy-scale, 1)); transform-origin: center; opacity: var(--copy-opacity, 1); will-change: transform, opacity; }
.scroll-story .story-copy h1 { font-size: clamp(52px, 6.8vw, 88px); }
.scroll-story .hero-cn { text-wrap: balance; }
.scroll-story .hero-copy { max-width: 720px; text-wrap: balance; }
.scroll-story .hero-stage { position: absolute; z-index: 2; top: calc(50% + 46px); left: 50%; width: 1100px; height: 690px; min-height: 690px; max-width: none; margin: 0; transform: translate(-50%, -50%) translateY(var(--board-lift, 0px)) scale(var(--board-scale, .8)); transform-origin: center; opacity: var(--board-opacity, 0); will-change: transform, opacity; }
.scroll-story .feature-callout { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985); }
.scroll-story .feature-callout.is-revealed { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.scroll-story .feature-arrow { display: block; }
.scroll-story .canvas > :not(.story-native) { opacity: var(--story-decor-opacity, 1); }
.story-file-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.story-file { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 7px; width: 156px; height: 118px; padding: 10px; overflow: hidden; border: 1px solid rgba(73, 113, 180, .1); border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: var(--soft-shadow); transform-origin: 0 0; will-change: transform, opacity; }
.story-file-preview { flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 9px; background: #f3f7fc; }
.story-file-preview svg { display: block; width: 100%; height: 100%; }
.story-file-label { display: flex; align-items: center; gap: 8px; flex: 0 0 22px; min-height: 0; color: #4e5b70; text-align: left; font-size: 13px; font-weight: 600; line-height: 1; }
.story-file-label::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--file-accent, #5291ff); }
.story-file-label small { margin-left: auto; color: #9ba7b9; font-size: 9px; font-weight: 400; }
.story-mobile-detail { display: none; }
.story-file-preview--jpg { background: url("board-reference.png") -178px -327px / 743px auto no-repeat; }
.story-file-preview--mp4 { position: relative; background: url("board-reference.png") -366px -352px / 743px auto no-repeat; }
.story-file-preview--mp4::after { content: "▶"; position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(20, 28, 42, .66); color: white; font-size: 12px; }
.story-file-preview--png { background: url("board-reference.png") -501px -332px / 743px auto no-repeat; }
.story-board-asset { top: 14px; width: 144px; height: 40px; gap: 8px; padding: 7px 9px; font-size: 9px; }
.story-board-asset .type-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; font-size: 9px; }
.story-board-mp3 { left: 22px; }
.story-board-csv { left: 179px; }
.story-board-xlsx { left: 336px; }
.story-board-gif { left: 493px; }
.story-board-png { left: 650px; }
.scroll-entry { opacity: 0; translate: 0 var(--entry-distance, 42px); scale: .98; transition: opacity .58s cubic-bezier(.2,.75,.25,1), translate .7s cubic-bezier(.2,.75,.25,1), scale .7s cubic-bezier(.2,.75,.25,1); transition-delay: var(--entry-delay, 0ms); }
.scroll-entry.is-visible { opacity: 1; translate: 0 0; scale: 1; }
@media (max-width: 1100px) {
  .story-file { padding: 6px; gap: 4px; }
  .story-file-label { flex-basis: 16px; font-size: 10px; }
  .scroll-story .story-copy { width: min(720px, calc(100% - 80px)); }
  .scroll-story .story-copy h1 { font-size: clamp(50px, 6.7vw, 76px); }
  .scroll-story .hero-cn { font-size: 25px; }
  .scroll-story .hero-copy { max-width: 620px; }
}
@media (max-width: 760px) {
  .story-copy { top: 108px; width: calc(100% - 36px); transform: translateX(-50%) translateY(var(--copy-lift, 0px)) scale(var(--copy-scale, 1)); }
  .scroll-story .story-copy { width: calc(100% - 36px); }
  .scroll-story .story-copy h1 { font-size: clamp(40px, 12vw, 58px); line-height: 1.05; }
  .scroll-story .hero-cn { margin: 16px 0 10px; font-size: clamp(16px, 4.5vw, 20px); }
  .scroll-story .hero-copy { padding: 0; font-size: 13px; line-height: 1.75; }
  .scroll-story .hero-actions { gap: 10px; margin-top: 20px; flex-wrap: nowrap; }
  .scroll-story .hero-actions > * { padding: 12px 15px; font-size: 12px; white-space: nowrap; }
  .scroll-story .hero-stage { margin: 0; }
  .scroll-story .share-card { right: -58px; bottom: -4px; }
  .story-file { gap: 4px; padding: 6px; border-radius: 11px; }
  .story-file-preview { border-radius: 6px; }
  .story-file-label { justify-content: center; flex-basis: 16px; font-size: 10px; gap: 0; }
  .story-file-label::before, .story-file-label small { display: none; }
  .story-file-preview--jpg { background-size: 390px auto; background-position: -93px -171px; }
  .story-file-preview--mp4 { background-size: 390px auto; background-position: -192px -185px; }
  .story-file-preview--png { background-size: 390px auto; background-position: -263px -174px; }
  .story-file-preview--mp4::after { width: 20px; height: 20px; font-size: 8px; }
  .story-mobile-detail { position: absolute; z-index: 6; top: var(--story-detail-top, calc(50% + clamp(130px, 18vh, 170px))); left: 50%; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 13px; width: min(353px, calc(100% - 40px)); padding: 18px; border: 1px solid rgba(73, 113, 180, .08); border-radius: 20px; background: rgba(255, 255, 255, .91); box-shadow: var(--soft-shadow); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .2s ease, transform .3s ease, visibility .2s; pointer-events: none; }
  .story-mobile-detail.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .story-mobile-detail h3 { margin: 0 0 5px; font-size: 16px; text-align: left; }
  .story-mobile-detail p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: left; }
  .scroll-entry { --entry-distance: 26px; scale: .99; }
}
@media (max-height: 720px) and (min-width: 761px) {
  .story-file { padding: 6px; gap: 4px; }
  .story-file-label { flex-basis: 16px; font-size: 10px; }
  .story-copy { top: 46%; }
  .scroll-story .story-copy h1 { font-size: 66px; }
  .scroll-story .hero-cn { font-size: 24px; }
  .scroll-story .hero-actions { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-file, .story-copy, .scroll-story .hero-stage { will-change: auto; }
  .scroll-entry, .scroll-entry.is-visible { opacity: 1; translate: none; scale: none; transition: none; }
}