/* BSH Aero — keyframes and container rules ported from the original design. */
body:not(.bsh-auto-page) { --om-zoom: 1; }
.bsh-how-sticky { height: calc(100vh / var(--om-zoom, 1)); height: calc(100dvh / var(--om-zoom, 1)); }
.bsh-hero { height: calc(100vh / var(--om-zoom, 1)); height: calc(100dvh / var(--om-zoom, 1)); }

/* ---------- Partners marquee: continuous scroll, per-logo hover ---------- */
.bsh-partners-viewport{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.bsh-partners-track{display:flex;gap:76px;width:max-content;will-change:transform;animation:bsh-partners-scroll 70s linear infinite;}
.bsh-partners-track:hover{animation-play-state:paused;}
.bsh-partners-track > div{height:68px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.bsh-partners-track > div img{height:39px;width:auto;display:block;filter:grayscale(1);opacity:.55;transition:opacity 200ms var(--ease-out),filter 200ms var(--ease-out);}
.bsh-partners-track > div:hover img{filter:grayscale(0);opacity:1;}
@keyframes bsh-partners-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.bsh-partners-track{animation:none;}}
.bsh-how-scene { transform: translate(-50%,-50%) scale(1.25); }
.bsh-how-desc { max-height: 80px; overflow: hidden; transition: opacity 400ms cubic-bezier(0.22,0.61,0.36,1), max-height 400ms cubic-bezier(0.22,0.61,0.36,1); }
@container (max-height: 680px) {
  .bsh-how-steps { gap: 16px !important; }
  .bsh-how-desc { max-height: 0; }
  .bsh-how-desc.bsh-how-desc-on { max-height: 80px; }
  .bsh-how-title { font-size: 15px !important; margin-bottom: 3px !important; }
}
@container (max-height: 640px) { .bsh-how-scene { transform: translate(-50%,-50%) scale(1); } }
@container (max-height: 480px) { .bsh-how-scene { transform: translate(-50%,-50%) scale(0.8); } }
@container (max-width: 620px) { .bsh-how-scene { transform: translate(-50%,-50%) scale(0.82); } }
@container (max-width: 460px) { .bsh-how-scene { transform: translate(-50%,-50%) scale(0.66); } }
@container (max-width: 380px) { .bsh-how-scene { transform: translate(-50%,-50%) scale(0.56); } }
@keyframes bsh-cursor1 { 0%{transform:translate(70px,54px);opacity:0} 10%{opacity:1} 38%,44%{transform:translate(0,0);opacity:1} 47%{transform:translate(0,0) scale(.85)} 52%{transform:translate(0,0) scale(1)} 80%{opacity:1;transform:translate(0,0)} 92%,100%{opacity:0;transform:translate(70px,54px)} }
@keyframes bsh-press1 { 0%,44%{transform:scale(1)} 48%{transform:scale(.95)} 54%,100%{transform:scale(1)} }
@keyframes bsh-ring1 { 0%,46%{transform:scale(.55);opacity:0} 52%{opacity:.55;transform:scale(1)} 72%{transform:scale(1.35);opacity:0} 100%{opacity:0} }
@keyframes bsh-mail2 { 0%{opacity:0;transform:translate(-50%,-46%)} 7%{opacity:1;transform:translate(-50%,-50%)} 46%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg)} 56%,100%{opacity:0;transform:translate(-50%,-53%) scale(.45) rotate(-5deg)} }
@keyframes bsh-cursor2 { 0%{transform:translate(120px,80px);opacity:0} 8%{opacity:1} 28%,38%{transform:translate(-124px,-74px)} 41%{transform:translate(-124px,-74px) scale(.85)} 45%{transform:translate(-124px,-74px) scale(1)} 50%{opacity:1;transform:translate(-124px,-74px)} 56%,100%{opacity:0;transform:translate(-124px,-74px)} }
@keyframes bsh-sendpress2 { 0%,38%{transform:scale(1)} 42%{transform:scale(.9)} 46%,100%{transform:scale(1)} }
@keyframes bsh-fly2 { 0%,54%{opacity:0;transform:translate(-16px,-12px) scale(.5) rotate(0deg)} 61%{opacity:1;transform:translate(0px,-12px) scale(1) rotate(0deg)} 82%{opacity:1;transform:translate(165px,-100px) scale(1) rotate(14deg)} 88%,100%{opacity:0;transform:translate(165px,-100px) rotate(14deg)} }
@keyframes bsh-doc3 { 0%{opacity:0;transform:translate(-34%,-50%)} 12%{opacity:1;transform:translate(-50%,-50%)} 93%{opacity:1;transform:translate(-50%,-50%)} 100%{opacity:0;transform:translate(-50%,-50%)} }
@keyframes bsh-cursor3 { 0%{transform:translate(130px,70px);opacity:0} 10%{opacity:1} 22%{transform:translate(96px,-16px)} 40%{transform:translate(96px,20px)} 56%{transform:translate(96px,56px)} 62%{transform:translate(96px,56px) scale(.85)} 68%{transform:translate(96px,56px) scale(1)} 88%{opacity:1;transform:translate(96px,56px)} 96%,100%{opacity:0;transform:translate(130px,70px)} }
@keyframes bsh-write4 { 0%{opacity:0;transform:translate(-50%,-48%)} 7%{opacity:1;transform:translate(-50%,-50%)} 52%{opacity:1;transform:translate(-50%,-50%) scale(1)} 62%,90%{opacity:.15;transform:translate(-50%,-50%) scale(.85)} 100%{opacity:0;transform:translate(-50%,-50%) scale(.85)} }
@keyframes bsh-line4 { 0%,8%{transform:scaleX(0)} 18%{transform:scaleX(1)} 100%{transform:scaleX(1)} }
@keyframes bsh-pop4a { 0%,55%{opacity:0;transform:translate(-116%,-50%) scale(.5) rotate(-3deg)} 62%{opacity:1;transform:translate(-116%,-50%) scale(1.06) rotate(-3deg)} 66%{transform:translate(-116%,-50%) scale(1) rotate(-3deg)} 93%{opacity:1;transform:translate(-116%,-50%) scale(1) rotate(-3deg)} 100%{opacity:0;transform:translate(-116%,-50%) scale(1) rotate(-3deg)} }
@keyframes bsh-pop4b { 0%,61%{opacity:0;transform:translate(8%,-50%) scale(.5) rotate(2deg)} 68%{opacity:1;transform:translate(8%,-50%) scale(1.06) rotate(2deg)} 72%{transform:translate(8%,-50%) scale(1) rotate(2deg)} 93%{opacity:1;transform:translate(8%,-50%) scale(1) rotate(2deg)} 100%{opacity:0;transform:translate(8%,-50%) scale(1) rotate(2deg)} }
@keyframes bsh-row3a { 0%,16%{background:#fff;border-color:rgba(13,28,43,.08)} 22%,32%{background:rgba(168,144,109,.07);border-color:rgba(168,144,109,.45)} 40%,100%{background:#fff;border-color:rgba(13,28,43,.08)} }
@keyframes bsh-row3b { 0%,36%{background:#fff;border-color:rgba(13,28,43,.08)} 42%,52%{background:rgba(168,144,109,.07);border-color:rgba(168,144,109,.45)} 60%,100%{background:#fff;border-color:rgba(13,28,43,.08)} }
@keyframes bsh-row3c { 0%,56%{background:#fff;border-color:rgba(13,28,43,.08)} 64%,90%{background:rgba(168,144,109,.09);border-color:rgba(168,144,109,.55)} 98%,100%{background:#fff;border-color:rgba(13,28,43,.08)} }
@keyframes bsh-check3 { 0%,62%{opacity:0;transform:scale(.4)} 70%,90%{opacity:1;transform:scale(1)} 98%,100%{opacity:0;transform:scale(.4)} }
@media (prefers-reduced-motion: reduce) {
  .bsh-how-scene *, .bsh-doc-sheet * { animation: none !important; }
}

/* The mockup card sits left-flush inside its wider .bsh-how-scene canvas (the extra room on
   the right is reserved for the animated cursor's travel range). .bsh-options-media clips the
   canvas so the cursor can't visually escape it, but that made the clip box tight against the
   card on the left/top/bottom and wide open on the right — so the card's own border only ever
   had room to render on the right/bottom edges (the mockup panel's aspect-ratio was also a
   touch short, clipping ~11px off the top and bottom regardless of centring). Nudge the canvas
   right so the card centres horizontally in the clip box (the panel's height was bumped in the
   markup itself to stop the vertical clipping). Scoped to this section only — .bsh-how-scene is
   reused unscaled by the roadmap section. */
.bsh-options-media .bsh-how-scene{transform:translate(calc(-50% + 44px),-50%) scale(1.25);}

/* "All options in one document" — stack text above the animated mock on phones, and make the mock fit within the column instead of a fixed 460px absolute-centred box. */
@media (max-width: 767px) {
  .bsh-ad-benefits-grid{grid-template-columns:1fr !important;gap:20px !important;}
  .bsh-options-grid{grid-template-columns:1fr !important;gap:32px !important;}
  .bsh-options-text{order:1;}
  .bsh-options-media{order:2;aspect-ratio:auto !important;height:auto !important;max-width:420px;margin:0 auto;}
  .bsh-options-media > div{height:auto !important;}
  .bsh-options-media .bsh-how-scene{position:static !important;left:auto !important;top:auto !important;width:100% !important;max-width:390px;margin:0 auto;transform:none !important;}
  .bsh-options-media .bsh-how-scene > div{width:100% !important;}
}

/* Site-wide lateral padding: 32px (roadmap + options sections) and 40px (automation hero) down to 24px on phones. */
@media (max-width: 767px) {
  .bsh-lat32{padding-left:24px !important;padding-right:24px !important;}
  .bsh-lat40{padding-left:24px !important;padding-right:24px !important;}
  .bsh-vgap112{padding-top:56px !important;padding-bottom:56px !important;}
  /* .bsh-how-topgroup is itself position:absolute + width:100%, so its containing block is the ancestor's full padding box — the ancestor's own padding never reaches it. Inset it directly. */
  .bsh-how-topgroup{width:calc(100% - 48px) !important;}
}