
/* APIS Lab v6.46 — mobile master layout.
   One final mobile source of truth for gutters, heading rhythm, section spacing and overflow. */

@media (max-width:760px){
  :root{
    --v646-gutter:20px;
    --v646-label-title:22px;
    --v646-title-copy:24px;
    --v646-head-content:36px;
    --v646-section-y:54px;
  }

  html,body{width:100%!important;max-width:100%!important;overflow-x:clip!important}
  body{overscroll-behavior-x:none!important}
  main{width:100%!important;max-width:100%!important;overflow-x:clip!important}
  main>section{width:100%!important;max-width:100%!important;overflow-x:clip!important}

  /* Every content shell has the same real gutter. This intentionally overrides legacy full-width shell rules. */
  html body main .v6-shell,
  html body main .container,
  html body footer .v6-shell{
    width:calc(100% - (var(--v646-gutter) * 2))!important;
    max-width:calc(100% - (var(--v646-gutter) * 2))!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Header keeps its own compact geometry; do not let page-shell rules distort it. */
  html body .v6-header .v6-shell{
    width:calc(100% - 40px)!important;
    max-width:calc(100% - 40px)!important;
    margin-inline:auto!important;
  }

  /* Hard containment for all content children. */
  html body main :where(.v645-heading-group,.v645-head-layout,.intl-two,.tools-ethic,.tool-explain-grid,.lab-tools-bridge,
    .analytics-grid,.decision-wheel,.evidence-grid-v625,.roadmap-grid,.pilot-grid-v625,.scenario-premium-grid,
    .deliver-grid,.related-tool-grid,.editorial-grid,.radar-pro-grid,.editorial-large-grid,.pro-tool-grid,.tool-prof-grid,
    .service-hero-grid,.article-hero-grid,.tool-hero-grid,.tools-hub-grid,.lab-v624-hero-grid,.strategy-hero-grid){
      min-width:0!important;max-width:100%!important;box-sizing:border-box!important
  }

  html body main :where(h1,h2,h3,h4,p,li,a,b,span,strong){overflow-wrap:break-word;word-break:normal}

  /* ONE label -> title rhythm on all normalized blocks. */
  html body main .v645-heading-group{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
  }
  html body main .v645-heading-group>:is(.v6-label,.v5-kicker){
    display:block!important;
    flex:none!important;
    margin:0 0 var(--v646-label-title)!important;
    padding:0!important;
    line-height:1.2!important;
  }
  html body main .v645-heading-group>:is(h1,h2,h3){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:.98!important;
  }
  html body main .v645-heading-group>h2,
  html body main :where(.intl-two,.tools-ethic,.tool-explain-grid,.lab-tools-bridge) .v645-heading-group>h2{
    font-size:clamp(40px,12vw,54px)!important;
    letter-spacing:-.045em!important;
  }
  html body main .v645-heading-group>:is(h1,h2,h3)+:is(p,.v5-lede){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:var(--v646-title-copy) 0 0!important;
    padding:0!important;
    line-height:1.55!important;
  }

  /* Head wrappers with copy in a separate column on desktop. */
  html body main .v645-head-layout{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    gap:0!important;
    margin:0 0 var(--v646-head-content)!important;
    padding:0!important;
  }
  html body main .v645-head-layout>.v645-heading-group+ :is(p,a.text-link){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:var(--v646-title-copy) 0 0!important;
    padding:0!important;
    align-self:flex-start!important;
    line-height:1.58!important;
  }

  /* Direct heads normalized by markup migration. */
  html body main :is(.v624-section-head,.decision6-intro,.home-intl-bridge-head).v645-heading-group{
    margin-bottom:var(--v646-head-content)!important;
  }
  html body main .v624-section-head.v645-heading-group>a.text-link{
    margin:var(--v646-title-copy) 0 0!important;
  }

  /* Desktop two-column explanation blocks become clean stacks. */
  html body main :is(.intl-two,.tools-ethic,.tool-explain-grid,.lab-tools-bridge){
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    gap:28px!important;
    margin:0!important;
    padding:0!important;
  }
  html body main :is(.intl-two,.tools-ethic,.tool-explain-grid,.lab-tools-bridge)>.v645-heading-group,
  html body main :is(.intl-two,.tools-ethic,.tool-explain-grid) > :nth-child(2),
  html body main .lab-tools-bridge>.lab-tool-links{
    width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;
  }
  html body main :is(.intl-two,.tools-ethic,.tool-explain-grid)>:nth-child(2) :where(p,li){
    max-width:100%!important;
  }

  /* Section-to-section rhythm: no huge voids and no collapsed sections. */
  html body main :is(
    .intl-definition,.intl-situations,.intl-method,.intl-decisions,.intl-analytics,.intl-evidence-v625,
    .intl-economics,.intl-risk-v625,.intl-funnel,.intl-roadmap,.pilot-90-v625,.intl-scenarios,
    .intl-deliverables,.intl-tools,.intl-reading,.intl-start,
    section.v624-section,section.v624-soft,section.v624-dark
  ){
    padding-top:var(--v646-section-y)!important;
    padding-bottom:var(--v646-section-y)!important;
  }
  html body main :is(.intl-method,.intl-funnel,.intl-start,section.v624-dark){
    padding-top:56px!important;padding-bottom:56px!important;
  }

  /* Cards/content start at one predictable distance after section heads. */
  html body main .v645-head-layout + :is(.situation-grid,.method-timeline,.decision-wheel,.analytics-grid,.evidence-grid-v625,
    .roadmap-grid,.pilot-grid-v625,.scenario-premium-grid,.deliver-grid,.related-tool-grid,.editorial-grid,.radar-pro-grid,
    .editorial-large-grid,.pro-tool-grid,.tool-prof-grid){
      margin-top:0!important;
  }

  /* Important International blocks from user screenshots. */
  html body main .intl-definition .intl-two{gap:30px!important}
  html body main .intl-definition .v645-heading-group>.v6-label{margin-bottom:22px!important}
  html body main .intl-evidence-v625 .v645-head-layout,
  html body main .intl-decisions .v645-head-layout,
  html body main .intl-analytics .v645-head-layout{margin-bottom:38px!important}

  /* Decision core remains centered and never breaks into offset columns. */
  html body main .decision-wheel .wheel-core{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:8px!important;text-align:center!important;min-width:0!important;max-width:100%!important;padding:22px 18px!important
  }
  html body main .decision-wheel .wheel-core :where(span,b){margin:0!important;text-align:center!important;max-width:100%!important}

  /* Tools/ethic regression: never full-bleed, never oversized. */
  html body main .tools-ethic>.v645-heading-group>h2{
    font-size:clamp(39px,11.5vw,52px)!important;
    line-height:.99!important;
  }
  html body main .tools-ethic>div:nth-child(2){font-size:16px!important;line-height:1.62!important}
  html body main .tools-ethic>div:nth-child(2) p{margin:0 0 24px!important;line-height:1.62!important}

  /* All tables stay inside their own scroller and can never push the page. */
  html body main .table-scroll,html body main .heat-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  html body main :where(.result-table,.pro-market-table,.channel-table,.heat-table){max-width:none!important}

  /* Breadcrumbs: visible, compact and consistent on every internal page. */
  html body main>.v645-crumb-band{
    display:block!important;width:100%!important;max-width:100%!important;margin:0!important;
    padding:18px 0!important;background:#ebe6dc!important;color:#25272b!important;overflow:visible!important;
  }
  html body main>.v645-crumb-band .v6-shell{
    width:calc(100% - (var(--v646-gutter) * 2))!important;max-width:calc(100% - (var(--v646-gutter) * 2))!important;
  }
  html body main>.v645-crumb-band .v624-crumbs{margin:0!important;padding:0!important;gap:10px!important}

  /* Hero after breadcrumbs must not add header height a second time. */
  html body main>.v645-crumb-band+:is(.intl-hero,.tools-hub-hero,.tool-v624-hero,.lab-v624-hero,.article-v624-hero,
    .scenario-v624-hero,.intel-hero,.work-hero,.strategy-hero,.service-hero,.page-hero,.tool-hero,.case6-hero,.case-detail-hero){
      padding-top:44px!important;
  }

  /* Mobile headline safety across page families. */
  html body main :where(.intl-copy h1,.tools-hub-grid h1,.tool-hero-grid h1,.lab-v624-hero h1,.article-v624-hero h1,
    .scenario-hero-grid h1,.strategy-hero h1,.service-hero h1,.page-hero h1,.intel-hero h1){
      max-width:100%!important;font-size:clamp(46px,13.5vw,64px)!important;line-height:.94!important;letter-spacing:-.05em!important;
  }
}

@media(max-width:380px){
  :root{--v646-gutter:16px;--v646-label-title:20px;--v646-title-copy:22px;--v646-head-content:32px;--v646-section-y:48px}
  html body .v6-header .v6-shell{width:calc(100% - 32px)!important;max-width:calc(100% - 32px)!important}
  html body main .v645-heading-group>h2{font-size:clamp(38px,12vw,49px)!important}
}

/* Final cascade guard: a shell may also carry a layout class (e.g. .v6-shell.tools-ethic).
   Shell geometry always wins over layout width:100 rules. */
@media(max-width:760px){
  html body main .v6-shell,
  html body main .container{
    width:calc(100% - (var(--v646-gutter) * 2))!important;
    max-width:calc(100% - (var(--v646-gutter) * 2))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body main>.v645-crumb-band>.v6-shell,
  html body main>.v645-crumb-band .v6-shell{
    width:calc(100% - (var(--v646-gutter) * 2))!important;
    max-width:calc(100% - (var(--v646-gutter) * 2))!important;
  }
}

/* Final heading cascade guard: several legacy selectors target div:first-child with gap/margins.
   Double-class specificity makes the normalized rhythm authoritative everywhere. */
@media(max-width:760px){
  html body main .v645-heading-group.v645-heading-group{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    row-gap:0!important;
    column-gap:0!important;
  }
  html body main .v645-heading-group.v645-heading-group>:is(.v6-label,.v5-kicker){
    margin:0 0 var(--v646-label-title)!important;
    padding:0!important;
  }
  html body main .v645-heading-group.v645-heading-group>:is(h1,h2,h3){
    margin:0!important;
    padding:0!important;
  }
  html body main .v645-heading-group.v645-heading-group>:is(h1,h2,h3)+:is(p,.v5-lede){
    margin:var(--v646-title-copy) 0 0!important;
  }
}

/* Absolute final mobile rhythm: use flex gap instead of margins, because legacy rules on labels vary by page family. */
@media(max-width:760px){
  html body main .v645-heading-group.v645-heading-group{
    gap:24px!important;
    row-gap:24px!important;
  }
  html body main .v645-heading-group.v645-heading-group>:is(.v6-label,.v5-kicker,h1,h2,h3,p,.v5-lede){
    margin:0!important;
  }
  html body main .v645-head-layout>.v645-heading-group+ :is(p,a.text-link){
    margin-top:24px!important;
  }
  /* tiny standalone redirect pages must not create an 8px horizontal scroll */
  html body>p{max-width:calc(100% - 16px)!important;box-sizing:border-box!important}
}

/* Case-family labels had an additional legacy 16px margin. Neutralize it with higher specificity. */
@media(max-width:760px){
  html body main .v645-heading-group.v645-heading-group.v645-heading-group>:is(.v6-label,.v5-kicker){
    margin:0!important;
    padding:0!important;
  }
  html body>p{
    width:calc(100% - 16px)!important;
    max-width:calc(100% - 16px)!important;
    box-sizing:border-box!important;
  }
}

/* Last-resort specificity for direct section heads that still carried legacy gap:0. */
@media(max-width:760px){
  html:root body main .v645-heading-group.v645-heading-group.v645-heading-group{
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
    row-gap:24px!important;
    column-gap:0!important;
  }
  html:root body main .v645-heading-group.v645-heading-group.v645-heading-group>:is(.v6-label,.v5-kicker,h1,h2,h3,p,.v5-lede){
    margin:0!important;
  }
  html body{margin:0!important}
}
