/* Mobile composition from Figma 152978:139680. Desktop scenes and timelines stay shared. */
@media (max-width: 768px) {
  .bo-page {
    background: #fff;
  }
  .bo-page main {
    padding-top: 101px;
  }
  .bo-wrap {
    width: calc(100% - 24px);
  }
  .bo-section {
    margin-top: 100px;
  }
  .bo-eyebrow {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  .bo-intro h1,
  .bo-heading h2,
  .bo-demo h2,
  .bo-faq h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 0.95;
  }
  .bo-intro h1 {
    max-width: 366px;
    margin-inline: auto;
  }
  .bo-product {
    font-size: inherit;
    margin: 0;
    display: block;
  }
  .bo-product img {
    display: none;
  }
  .bo-intro > p {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 20px !important;
  }
  .bo-intro > p br {
    display: none;
  }
  .bo-hero-card {
    height: 410px;
    min-height: 0;
    padding: 0;
    margin-top: 32px;
    border-radius: 16px;
  }
  .bo-hero-art {
    width: 693px;
    height: 410px;
    left: calc(50% - 183px);
    top: 0;
    transform: none;
  }
  .bo-hero-art .bo-scene-canvas > div > div {
    left: -1565px !important;
    top: -468px !important;
  }
  .bo-hero-copy {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 16px;
    background: linear-gradient(#0002, transparent 32%);
  }
  .bo-hero-copy::before {
    display: none;
  }
  .bo-hero-copy h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    max-width: 318px;
  }
  .bo-hero-copy strong {
    font-size: 16px;
    line-height: 1.15;
    margin-top: 12px;
  }
  .bo-hero-copy p {
    display: none;
  }
  .bo-button {
    padding: 18px;
    font-size: 16px;
    box-sizing: border-box;
  }
  .bo-heading {
    margin-bottom: 32px;
  }
  .bo-heading > p {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 24px !important;
  }
  .bo-team-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bo-team-card .bo-graphic {
    height: 300px;
    border-radius: 16px;
  }
  .bo-team-card .bo-scene-canvas > div::after {
    display: none;
  }
  .bo-team-card .bo-scene-canvas > div > div:first-child {
    inset: -35px 0 auto !important;
    height: 407px !important;
  }
  .bo-team-card .bo-scene-canvas > div > div:last-child {
    left: 16px !important;
    width: calc(100% - 32px) !important;
    gap: 12px !important;
  }
  .bo-team-card .bo-scene-canvas > div > div:last-child > p {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
  .bo-team-card .bo-scene-canvas > div > div:last-child > div {
    font-size: 14px !important;
  }
  .bo-team-card .bo-scene-canvas > div > div:last-child br {
    display: none;
  }
  .bo-team-card:nth-child(1) img {
    width: 125.77% !important;
    height: 168.28% !important;
    left: -12.89% !important;
    top: -1.83% !important;
  }
  .bo-team-card:nth-child(2) img {
    height: 134.04% !important;
    top: -6.76% !important;
  }
  .bo-team-card:nth-child(4) img {
    width: 130.12% !important;
    height: 145.95% !important;
    left: -4.41% !important;
    top: -17.54% !important;
  }
  .bo-team-card:nth-child(5) img {
    width: 114.88% !important;
    height: 238.78% !important;
    left: -7.32% !important;
    top: -82.35% !important;
  }
  .bo-profit,
  .bo-graphic {
    border-radius: 16px;
  }
  .bo-profit [data-node-id="152941:128086"] {
    box-sizing: border-box;
    min-height: 705px;
    padding: 16px 16px 0;
    background: #272727 !important;
  }
  .bo-profit [data-node-id="152941:128086"]::before {
    inset: 0;
    filter: none;
    background: url("../../media/backoffice-mobile/profit.webp")
      calc(50% - 117px) top / 705px 954px no-repeat;
  }
  .bo-profit [data-node-id="152941:128087"] {
    display: none;
  }
  .bo-profit [data-node-id="152941:128093"] {
    gap: 8px !important;
    margin-bottom: 16px;
  }
  .bo-profit [data-node-id="152941:128093"] > div {
    padding: 8px 12px !important;
  }
  .bo-profit [data-node-id="152941:128093"] p {
    font-size: 16px !important;
  }
  .bo-profit [data-node-id="152941:128090"] {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    margin-bottom: 0;
  }
  .bo-profit [data-node-id="152941:128091"] {
    margin-top: auto;
    padding: 16px 0;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .bo-profit [data-node-id="152941:128091"] p {
    line-height: 1.2 !important;
  }
  .bo-features {
    gap: 8px;
    margin-top: 8px;
  }
  .bo-feature {
    min-height: 492px;
    border-radius: 16px;
  }
  .bo-feature-copy {
    padding: 16px 16px 0;
  }
  .bo-feature h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    max-width: 313px;
    margin-bottom: 12px !important;
  }
  .bo-feature-copy p,
  .bo-feature-copy > div {
    font-size: 14px;
    line-height: 1.2;
  }
  .bo-feature .bo-scene {
    margin-top: auto;
  }
  .bo-dashboard {
    margin-top: 100px;
  }
  .bo-dashboard-cta {
    font-size: 16px;
    padding: 18px;
  }
  .bo-dark {
    padding: 32px 0 12px;
  }
  .bo-dark > .bo-wrap > .bo-heading:first-child h2 {
    max-width: 299px;
    margin-inline: auto;
  }
  .bo-industry-grid {
    gap: 8px;
  }
  .bo-industry-grid .bo-graphic {
    border-radius: 16px;
  }
  .bo-industry-grid [data-node-id="152941:128099"],
  .bo-industry-grid [data-node-id="152941:128107"] {
    box-sizing: border-box;
    min-height: 633px;
    padding: 24px 16px 350px;
  }
  .bo-industry-grid [data-node-id="152941:128103"],
  .bo-industry-grid [data-node-id="152941:128111"] {
    font-size: 28px !important;
    margin-bottom: 16px !important;
  }
  .bo-industry-grid [data-node-id="152941:128104"],
  .bo-industry-grid [data-node-id="152941:128113"] {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
  .bo-industry-grid [data-node-id="152941:128104"] p {
    line-height: 1.2 !important;
  }
  .bo-industry-grid .bo-graphic-button {
    left: 16px !important;
    bottom: 16px !important;
    min-height: 54px;
    padding: 18px !important;
    max-width: calc(100% - 32px);
  }
  .bo-workflow-title {
    margin-top: 100px;
  }
  .bo-workflow-title h2 {
    max-width: 320px;
    margin-inline: auto;
  }
  .bo-workflow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bo-workflow .bo-graphic {
    height: 200px;
    aspect-ratio: auto !important;
    background: #272727;
  }
  .bo-workflow .bo-scene-canvas {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  .bo-workflow .bo-scene-canvas > div > div:first-child {
    width: 256px !important;
    height: 211px !important;
    left: auto !important;
    right: -60px;
    top: 0 !important;
  }
  .bo-workflow picture {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .bo-workflow picture img {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover;
  }
  .bo-workflow .bo-scene-canvas > div > div:last-child {
    box-sizing: border-box;
    inset: 16px auto 16px 16px !important;
    width: 145px !important;
    justify-content: space-between;
  }
  .bo-workflow .bo-scene-canvas p:first-child {
    font-size: 20px !important;
    white-space: normal !important;
  }
  .bo-workflow .bo-scene-canvas p:last-child {
    font-size: 14px !important;
    width: 137px !important;
    color: #999 !important;
  }
  .bo-connected {
    margin-top: 8px;
    padding-bottom: 206px;
    border-radius: 16px;
    background: #272727;
  }
  .bo-connected-copy {
    padding: 16px 16px 42px;
    background: #272727;
  }
  .bo-connected h2 {
    font-size: 20px;
    line-height: 0.95;
  }
  .bo-apps {
    gap: 12px;
    margin-top: 32px !important;
    flex-wrap: nowrap;
  }
  .bo-apps span {
    grid-template-columns: 36px auto;
    font-size: 16px;
    column-gap: 8px;
  }
  .bo-apps img {
    width: 36px;
    height: 36px;
  }
  .bo-apps small {
    font-size: 12px;
  }
  .bo-connected-copy > p:not(.bo-apps) {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 20px !important;
  }
  .bo-connected-copy > .bo-button {
    margin-top: 24px;
  }
  .bo-connected-art {
    height: 206px;
  }
  .bo-demo {
    gap: 32px;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .bo-demo-copy {
    display: contents;
  }
  .bo-demo h2 {
    order: 0;
    text-align: center;
  }
  .bo-demo-screen {
    order: 1;
    border-radius: 6px;
  }
  .bo-demo-box {
    order: 2;
    margin-top: 0;
    padding: 20px;
  }
  .bo-demo-box strong {
    font-size: 16px;
  }
  .bo-demo-box p {
    font-size: 14px;
  }
  .bo-faq h2 {
    text-transform: none;
    margin-bottom: 32px !important;
  }
  .bo-faq .prices-answers summary {
    font-size: 16px;
    padding-block: 16px;
  }
  .bo-final {
    margin-block: 100px !important;
    width: calc(100% - 24px);
    border-radius: 16px;
  }
}
@media (max-width: 359px) {
  .bo-intro h1,
  .bo-heading h2,
  .bo-demo h2,
  .bo-faq h2 {
    font-size: 32px;
  }
  .bo-profit [data-node-id="152941:128093"] p {
    font-size: 13px !important;
  }
  .bo-apps {
    gap: 6px;
  }
  .bo-apps span {
    font-size: 13px;
    gap: 4px;
  }
  .bo-apps img {
    width: 30px;
    height: 30px;
  }
}
@media (max-width: 768px) {
  .bo-intro h1 {
    text-wrap: balance;
  }
  .bo-hero-art .bo-scene-canvas {
    height: 746px !important;
  }
}
@media (max-width: 768px) {
  .bo-dark .bo-heading h2 br {
    display: none;
  }
  .bo-dark .bo-heading h2 {
    text-wrap: balance;
  }
  .bo-profit [data-node-id="152941:128086"]::before {
    background-position: calc(50% - 135px) top;
  }
  .bo-industry-grid [data-node-id="152941:128100"] {
    left: calc(50% - 226px) !important;
    top: -366px !important;
    width: 556px !important;
    height: 1105px !important;
  }
  .bo-industry-grid [data-node-id="152941:128100"] > div > div {
    width: 556px !important;
    height: 1105px !important;
  }
  .bo-industry-grid [data-node-id="152941:128100"] img {
    width: 148.26% !important;
    height: 99.97% !important;
    left: -24.13% !important;
    top: 0 !important;
  }
  .bo-industry-grid [data-node-id="152941:128106"] {
    left: calc(50% - 151px) !important;
    top: 291px !important;
    width: 298px !important;
    height: 187px !important;
  }
  .bo-industry-grid [data-node-id="152941:128108"] {
    left: calc(50% - 271px) !important;
    top: -75px !important;
    width: 777px !important;
    height: 923px !important;
  }
  .bo-industry-grid [data-node-id="152941:128114"] {
    left: calc(50% - 101px) !important;
    top: 318px !important;
    width: 207px !important;
    height: 146px !important;
  }
  .bo-industry-grid [data-node-id="152941:128102"],
  .bo-industry-grid [data-node-id="152941:128110"] {
    display: none;
  }
  .bo-industry-grid .bo-scene-canvas > div::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 270px;
    backdrop-filter: blur(7.25px);
    -webkit-backdrop-filter: blur(7.25px);
    mask-image: linear-gradient(#000 70%, transparent);
    pointer-events: none;
  }
  .bo-industry-grid [data-node-id="152941:128103"],
  .bo-industry-grid [data-node-id="152941:128104"],
  .bo-industry-grid [data-node-id="152941:128111"],
  .bo-industry-grid [data-node-id="152941:128113"],
  .bo-industry-grid .bo-graphic-button {
    z-index: 1;
  }
}
@media (max-width: 768px) {
  .bo-workflow .bo-graphic:first-child picture img {
    transform: scaleX(-1);
  }
  .bo-workflow .bo-graphic:nth-child(2) picture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #272727, transparent 20%);
  }
  .bo-workflow .bo-graphic:nth-child(3) picture img {
    width: 130.45% !important;
    height: 129.41% !important;
    left: -26.6% !important;
    top: -1.11% !important;
  }
  .bo-workflow .bo-graphic:nth-child(4) picture img {
    height: 147.58% !important;
    top: 0.25% !important;
  }
  .bo-connected h2 {
    max-width: 290px;
  }
}
@media (max-width: 768px) {
  .bo-eyebrow {
    line-height: 1.25;
  }
  .bo-eyebrow span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .bo-eyebrow span::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: url("../../media/backoffice-mobile/team.svg") center / contain
      no-repeat;
  }
  .bo-eyebrow span + span::before {
    background-image: url("../../media/backoffice-mobile/owner.svg");
  }
}
.bo-mobile-demo-person {
  display: none;
}
@media (max-width: 768px) {
  .bo-faq .prices-answers details {
    padding: 0;
  }
  .bo-faq .prices-answers details p {
    font-size: 14px;
    padding-bottom: 16px;
  }
  .bo-final {
    height: 500px;
    min-height: 500px;
  }
  .bo-final .industry-art {
    display: none;
  }
  .bo-final .prices-demo-copy {
    box-sizing: border-box;
    padding: 16px;
    width: 100%;
    height: 100%;
  }
  .bo-final h2 {
    font-size: 28px;
    text-transform: none;
    letter-spacing: 0;
    max-width: 297px;
    line-height: 0.95;
  }
  .bo-final .prices-demo-copy > p {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 24px;
    max-width: 306px;
  }
  .bo-final .home-button {
    position: absolute;
    bottom: 16px;
    left: 16px;
    margin: 0;
    padding: 18px;
    font-size: 16px;
    min-height: 54px;
  }
  .bo-mobile-demo-person {
    display: block;
    position: absolute;
    top: 199px;
    left: calc(50% - 158px);
    width: 316.6px;
    height: 393px;
    background: url("../../media/backoffice-mobile/person.webp") center / cover
      no-repeat;
  }
  .bo-mobile-demo-person span {
    position: absolute;
    left: 86.76px;
    top: 214.95px;
    width: 146.323px;
    height: 94.851px;
    background: url("../../media/backoffice-mobile/person-screen.webp") center /
      contain no-repeat;
  }
}