/* BUKLIO onboarding mobile v4 · mobile mirrors the approved web proportions. */

@media (max-width:699px){
  .buklio-onboarding-shell{
    padding-top:max(12px,env(safe-area-inset-top));
    padding-left:clamp(18px,5.5vw,24px);
    padding-right:clamp(18px,5.5vw,24px);
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }

  /* Keep the logo visually separate from the orbit, as in the desktop review. */
  .buklio-onboarding-brand{
    min-height:74px;
    margin-bottom:12px;
  }
  .buklio-onboarding-brand img{
    width:min(50vw,225px)!important;
    max-height:66px!important;
  }

  .buklio-onboarding-slide{
    padding-top:0;
  }
  .buklio-onboarding-art{
    padding-top:12px;
    padding-bottom:14px;
  }

  /* One identical circle system for all three slides. */
  .buklio-onboarding-art::before,
  .buklio-orbit,
  .buklio-onboarding-slide[data-onboarding-slide="0"] .buklio-orbit,
  .buklio-onboarding-slide[data-onboarding-slide="1"] .buklio-orbit{
    width:min(68vw,315px)!important;
  }
  .buklio-onboarding-art::before{
    transform:translateY(1%)!important;
  }
  .buklio-orbit{
    left:50%;
    top:50%;
    transform:translate(-50%,-49%) rotate(-11deg)!important;
  }

  /* Same illustration-to-orbit ratio used by the desktop composition. */
  .buklio-onboarding-art img{
    max-width:min(64vw,296px)!important;
    max-height:min(35dvh,325px)!important;
  }
  .buklio-onboarding-art--organiza img{
    max-width:min(65vw,300px)!important;
    max-height:min(35dvh,325px)!important;
  }
  .buklio-onboarding-art--descubre img{
    max-width:min(61vw,282px)!important;
    max-height:min(34dvh,315px)!important;
  }

  /* More breathing room below the circle before the text block. */
  .buklio-onboarding-copy{
    min-height:146px;
    padding:18px 6px 0;
  }
  .buklio-onboarding-copy h1{
    font-size:clamp(22px,5.9vw,30px);
    line-height:1.17;
    max-width:430px;
  }
  .buklio-onboarding-copy p{
    margin-top:12px;
    font-size:clamp(14px,3.9vw,18px);
    line-height:1.38;
  }

  /* Re-seat the slide-three feature bubbles around the smaller common orbit. */
  .buklio-feature-bubble{
    width:48px;
    height:48px;
  }
  .buklio-feature-bubble svg{
    width:25px;
    height:25px;
  }
  .bubble-people{left:4%;top:13%}
  .bubble-chat{right:4%;top:14%}
  .bubble-book{left:1%;top:53%}
  .bubble-universe{right:1%;top:56%}

  /* Keep literary accents on the orbit instead of crowding the raven. */
  .buklio-literary-book{left:10%;top:39%;transform:scale(.9) rotate(-11deg)}
  .buklio-literary-notebook{right:11%;top:35%;transform:scale(.9) rotate(9deg)}
  .buklio-literary-pencil{left:24%;bottom:20%;transform:scale(.9) rotate(-16deg)}
  .buklio-literary-note{right:20%;bottom:22%;transform:scale(.9) rotate(8deg)}

  .buklio-onboarding-footer{
    gap:10px;
    padding-top:10px;
  }
}

/* Short iPhone / browser viewports keep the same proportions instead of enlarging the art. */
@media (max-width:699px) and (max-height:760px){
  .buklio-onboarding-brand{
    min-height:60px!important;
    margin-bottom:8px;
  }
  .buklio-onboarding-brand img{
    width:min(45vw,205px)!important;
    max-height:56px!important;
  }
  .buklio-onboarding-art{
    padding-top:8px;
    padding-bottom:10px;
  }
  .buklio-onboarding-art::before,
  .buklio-orbit,
  .buklio-onboarding-slide[data-onboarding-slide="0"] .buklio-orbit,
  .buklio-onboarding-slide[data-onboarding-slide="1"] .buklio-orbit{
    width:min(62vw,286px)!important;
  }
  .buklio-onboarding-art img,
  .buklio-onboarding-art--organiza img{
    max-width:min(58vw,268px)!important;
    max-height:min(31dvh,275px)!important;
  }
  .buklio-onboarding-art--descubre img{
    max-width:min(55vw,255px)!important;
    max-height:min(30dvh,268px)!important;
  }
  .buklio-onboarding-copy{
    min-height:112px!important;
    padding-top:14px!important;
  }
  .buklio-onboarding-copy h1{
    font-size:clamp(19px,5.2vw,26px)!important;
  }
  .buklio-onboarding-copy p{
    font-size:clamp(13px,3.6vw,16px)!important;
    margin-top:7px!important;
  }
  .buklio-feature-bubble{
    width:43px;
    height:43px;
  }
  .buklio-feature-bubble svg{
    width:22px;
    height:22px;
  }
}