/* APIS Lab v6.37 — mobile hero typography + CTA arrow spacing */

/* Arrow spans inside v6 buttons must remain part of the label, never drift to an edge. */
.v6-btn>span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  line-height:1!important;
}
.v5-btn.arrow::after{flex:0 0 auto!important;margin-left:2px!important;line-height:1!important}

@media(max-width:760px){
  /* The outlined second line is attractive on desktop, but at phone sizes the stroke
     breaks visually across wrapped words. Use a solid, slightly calmer second phrase. */
  .hero6 h1 em,
  .work-hero h1 em,
  .lab6-hero h1 em,
  .expert6-hero h1 em{
    display:block!important;
    color:var(--ink,#111318)!important;
    -webkit-text-stroke:0 transparent!important;
    text-stroke:0 transparent!important;
    text-shadow:none!important;
    font-style:normal!important;
    font-size:.86em!important;
    line-height:.94!important;
    letter-spacing:-.055em!important;
    margin-top:.04em!important;
  }

  /* Stabilise the very large homepage title in narrow browsers. */
  .hero6 h1{
    font-size:clamp(56px,17vw,76px)!important;
    line-height:.88!important;
    letter-spacing:-.06em!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* Homepage primary actions: keep both buttons on one row while reserving room
     for the arrow inside the dark button. */
  .hero6-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)!important;
    gap:12px!important;
    align-items:stretch!important;
  }
  .hero6-actions .v6-btn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:60px!important;
    padding:0 14px!important;
    gap:7px!important;
    flex:none!important;
    font-size:13px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .hero6-actions .v6-btn.dark{padding-left:16px!important;padding-right:17px!important}
  .hero6-actions .v6-btn.dark>span{font-size:15px!important;transform:none!important}

  /* Same safe arrow spacing for v6 CTA buttons elsewhere on mobile. */
  .v6-btn>span{margin-left:1px!important;font-size:1em!important}
  .v6-btn{column-gap:8px!important}
}

@media(max-width:390px){
  .hero6 h1{font-size:clamp(54px,16.2vw,63px)!important}
  .hero6 h1 em,.work-hero h1 em,.lab6-hero h1 em,.expert6-hero h1 em{font-size:.84em!important}
  .hero6-actions{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important;gap:9px!important}
  .hero6-actions .v6-btn{font-size:12px!important;padding-left:10px!important;padding-right:10px!important;gap:6px!important}
  .hero6-actions .v6-btn.dark{padding-left:12px!important;padding-right:13px!important}
}