/* Versão móvel (tráfego do Instagram): ajustes de layout, toque e desempenho */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,[role="button"],.mascot-choice{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* toque: sem "hover preso" depois de tocar */
@media (hover:none){
  body .button:hover,body .provider-link:hover,.task:hover,.style-selector button:hover,#entregas .receive-grid article:hover,
  #videos .video-card:hover,#faq .faq-list details:hover,.assistants-section .mascot-choice:hover,.closing h2:hover,
  .suri-launcher:hover,.mode:hover .stage-path li i,.section-heading .eyebrow:hover,.offer-intro .eyebrow:hover,
  .video-heading .eyebrow:hover,.assistant-copy .eyebrow:hover,.reference-heading .eyebrow:hover,.quest-tag:hover,
  .steps .step-number:hover,.footer .mini-label:hover,.footer nav a:hover,.desktop-nav a:hover,.friction-grid article:hover{transform:none!important}
  .features-section .feature-tabs button:hover{transform:none}
}

@media (max-width:760px){
  .ecosystem .eco-track{animation-duration:26s;animation-timing-function:steps(90,end)}
}

@media (max-width:600px){
  /* faixa promocional em uma linha */
  .topline .wrap{gap:6px 8px;padding:6px 0}
  .topline,.topline span,.topline a{font-size:11px}
  .topline a{padding:2px 6px}

  /* cabeçalho: alvos de toque confortáveis */
  .menu-toggle{min-width:44px;min-height:44px}
  .language button{min-height:40px;min-width:40px}

  /* "Como funciona": ilustração em cima, texto embaixo, tudo em coluna */
  .steps article{grid-template-columns:1fr!important}
  .steps article .step-art{grid-column:1!important;grid-area:auto!important;justify-self:start;order:2;margin:14px 0 10px}
  .steps article .step-number{order:1;justify-self:start}
  .steps article .step-art:not(.task-art){width:min(100%,220px);height:96px}
  .steps article h3{order:3}
  .steps article p{order:4}
  .steps .task-art{width:100%;justify-content:flex-start;gap:10px;height:auto}
  .steps .task-art .benefit-icon{width:30px;height:30px;padding:10px}

  /* modos manual / HeyCut */
  .stage-path li{font-size:16px}
  .stage-path li i{width:32px;height:32px;font-size:9px}
  .stage-path li:not(.goal)::after{top:14px;left:calc(50% + 20px);width:calc(100% - 40px)}
  .stage-path li.goal{flex:0 0 32px}

  /* widget de dúvidas: botão compacto e janela como folha inferior */
  .suri-launcher .suri-launcher-copy{display:none}
  .suri-launcher{padding:6px 8px!important}
  .suri-widget{right:max(10px,env(safe-area-inset-right,0px))!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important}
  .suri-panel{
    position:fixed!important;left:8px!important;right:8px!important;bottom:calc(86px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;max-width:none!important;max-height:68vh!important;overflow-y:auto;border-radius:0!important;
  }

  /* rodapé: links com área de toque maior */
  .footer nav a{padding:9px 0}
  /* títulos nunca estouram a tela */
  h2,h3,h4{overflow-wrap:break-word;word-break:normal;hyphens:manual}
}
@media (max-width:380px){
  .friction-grid{grid-template-columns:1fr!important}
}

/* "Como funciona" em tablet também: ilustração em cima (os 3 ícones do passo 1 não cabem na coluna estreita) */
@media (max-width:900px){
  .steps article{grid-template-columns:1fr!important}
  .steps article .step-art{grid-column:1!important;grid-area:auto!important;justify-self:start;order:2;margin:14px 0 10px}
  .steps article .step-number{order:1;justify-self:start}
  .steps article .step-art:not(.task-art){width:min(100%,220px);height:96px}
  .steps article h3{order:3}
  .steps article p{order:4}
  .steps .task-art{width:100%;justify-content:flex-start;gap:10px;height:auto}
}